header画像を丸くしたい

Question

<!-- ここからconteiner -->
    <div id="container">

      <!-- ここからheader -->
      <header class="header">

        <div class="h-logo">
          <a href="index.html">
            <img class="h-title" src="images/logo.png" alt="ヘッダーロゴ画像">
          </a>

          <div class="sp-menu">
            <input type="checkbox" id="nav-input" class="nav-invisible">
            <label id="nav-open" for="nav-input"><span></span></label>
            <div id="nav-contents">
              <ul>
                <li class="sp-menu-list">
                  <a href="index.html">
                      <div class="sp-menu-top">
                        ホーム
                      </div>
                      <div class="sp-menu-bottom">
                        HOME
                      </div>
                  </a>
                </li>
                
              </ul>
            </div>
          </div>
        </div>

/* ===================
  ヘッダー
======================*/



img.h-title {
  width: 300px;
  margin-top: 36px;
  margin-left: 4%;
  margin-bottom: 30px;
  text-align: center;
  border-radius: 10px;
}

overflowyや、displayを使って見ましたが
うまくいきません

Comments

[m.ts10806]

「うまくいかない」では何が起きているか分かりません。
「丸く」も具体的に書いてください。
https://teratail.com/help/question-tips#questionTips3-4-1

[m.ts10806]

それに他のCSSが影響している可能性はありませんか？
まずbodyに画像だけで試してみましたか？問題の切り分けをしてください。
そこからようやく「どうやって解決するか」に入れます。

[m.ts10806]

ちなみにこちらの手元で画像だけで提示されたCSSだけで試しましたが、
5pxの角丸はできました。これではないのですか？
現在の現象とゴールを明示してください。

Answer 1

border-radiusを下記に変更して丸くできます。

img.h-title {
  border-radius: 50%;
}

Comments

[m.ts10806]

現状のコードでもなりますよ。

[m.ts10806]

「真円に」という要件かどうか分からないので悩みどころですけど・・
※ちなみに私は低評価していません