☰

背景色付きのDIVの角を丸くする質問する

tag-icon • tag-icon css html rounded-corners
背景色付きのDIVの角を丸くする質問する

次のようなコードがあります:

<div id="shell">
    <div id="title">TITLE HERE</div>
    <div id="content">Article Content Goes Here</div>
</div>

シェル div には、角を丸くしたい灰色の境界線があります。私が遭遇している問題は、タイトル div の背景が緑色で、シェルの角の丸い部分に重なっていることです。重なっているか、端に突き出ていないため、滑らかな外観が得られません。

私は IE 7 および 8 と下位互換性のあるソリューションを探していますが、HTML5 でシンプルなソリューションがあれば、それらのブラウザーを使わなくてもかまいません。

ありがとう！

ベストアンサー1

マークアップでは、の鋭角が に重ならないように#shell、と の両方に border-radius を指定する必要があります。#title#title#shell

実例を挙げると、http://jsfiddle.net/BXSJe/4/

#shell {
  width: 500px;
  height: 300px;
  background: lightGrey;
  border-radius: 6px;
}

#title {
  background: green;
  padding: 5px;
  border-radius: 6px 6px 0 0;
}
<div id="shell">
  <div id="title">TITLE HERE</div>
  <div id="content">Article Content Goes Here</div>
</div>

おすすめ記事