CSSで円形を作りたいのですが、出来ません。。。

Question

表題の件、色々と試したのですが適用させることができず、、どなたか教えていただけませんでしょうか。
以下そこの部分のHTMLとCSS転記させて戴きます。↓

<div class="main-feature-circle">
  <p>01</p>
</div>

.main-feature-circle {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.main-feature-circle p{
  font-size: 30px;
  color: #f79314;
  background-color: blue;
  text-align: center;
  font-weight: bolder;
  line-height: 100px;
}

おそらくですが、border-radius以外のCSSは適用されているようです。

このコードで、真四角な青い背景色の真ん中に"01"という文字が入っている状態です。

色々試したのですが、どれもお門違いな試しだったので、記述できるとしたら以下のことぐらいですが、記述させて戴きます。

・border-radiusを.main-feature-circle p{}セレクタに記述してみる。⇨　緩やかな楕円形が出来ました。

初歩的な質問大変恐縮ですが、何卒よろしくお願い申し上げます。

Answer 1

実は円形になっていますが、中身の<p>はそれと関係なく正方形となるので見えないだけです。

内側のpではなく外側の.main-feature-circleに背景色を敷きましょう（jsFiddle）。

Comments

[m.ts10806]

背景色しくほうが早かったですね。

[Hitokiyo-]

ご回答ありがとうございます。
試したところ、綺麗な円形ができました！
本当にありがとうございます。
連続のご質問誠に恐縮で、もしご返答いただければで構わないのですが、今のところどのセレクタにどのプロパティを記述すればいいのか、というのが全く理解できていない状態です。
これは慣れるまでやるしかないのでしょうか。それとも、そういった説明がある文献等ございましたら、ぜひ教えて戴きたいのですが。。。申し訳ございません。

[miyabi_pudding]

> これは慣れるまでやるしかないのでしょうか。それとも、そういった説明がある文献等ございましたら

CSS セレクタ 書き方
とかで調査してみましょう。

[Hitokiyo-]

ご返信遅れて申し訳ございません。
ありがとうございます。
早速調べてみます。

Answer 2

.main-feature-circlに対してborderの丸みは指定されていても
border自体の存在が指定されていません。

結局どうしたいのか分かりませんが、
border:1px solid #000; で真円は出ました。

Comments

[Hitokiyo-]

質問の質が低く申し訳ございません。
ご回答ありがとうございます！
試してみたら、円形ができました！

[m.ts10806]

質問の質の話がどこからでてきたのかわからないですが、「円はあるけど背景も線もないから可視化されてない」というのが回答の主旨です。

[Hitokiyo-]

ご返信ありがとうございます。
承知いたしました。
ありがとうございました！！

Answer 3

.main-feature-circle {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  overflow: hidden;
}

Comments

[Hitokiyo-]

ご回答ありがとうございます。
試したところ、円形ができました。
overflowについて学習いたします。
ありがとうございました。