liのbackgroundに対してのborder radiusがうまくできません

Question

前提・実現したいこと

質問見ていただきありがとうございます。早速質問なのですが、
list全体の背景の角を丸くしたいです。
div または ul に対してborder radiusをつかうとなにも変わらず、liに使うと一行一行に対して適用されます。背景全体のかどを丸くするにはどうしたらいいでしょうか？
エラーは出ていません。

あとulをdivで囲んだ時適用されないことがよくあります。
例えばdivのクラス名abとしてcssを書いた場合
.ab{}これは適用されず　.ab ul{}こっちはてきようされます。
この理由もよかったらお願いします。

webページの模写をしていまして
色々自分なりに調べたと思うのですが本当にわかりません。
初心者でくだらない質問かもしれませんがよろしくお願いいたします。

該当のソースコード

HTML

<div class="h3-list"> <ul> <li>来月から、新コースを時々開催します</li> <li>web最新動画トークセッション、参加者募集中</li> <li>今すぐ始めるキャンペーンで入会費が５０％オフです。</li> </ul>

CSS

body{
max-width: 1140px;
max-width: auto;
margin: 0 auto;
background-color: rgb(201, 197, 197);
}

/お知らせ/

.h3-list ul{
border-radius: 10px;
padding-left: 0 ;
}

.h3-list li{
background-color: #fff;
padding-left: 10px;
list-style-position: inside;
}

.h3-list{
}

試したこと

div ul li各それぞれにborder-radius: 10px;をしようしました。

Answer 1

解決済みですが、

list全体の背景の角を丸くしたいです。

ということなら、ul に背景色を設定するのが素直な解決法だと思います。

.h3-list ul {
  border-radius: 10px;
  padding-left: 0;
  background-color: #fff;
}

.h3-list li {
  padding-left: 10px;
  list-style-position: inside;
}

Comments

[kkei]

なるほど！
有り難うございます！
ためになりました！
おぼえておきます！！

Answer 2

border-radius プロパティは継承されないため、 ul 要素内に存在する li 要素が角丸部分からはみ出しています。これにより、 border-radius プロパティが動作していないように見えます。この動作は以下のような CSS を用いることでより視覚的に理解しやすくなります (動作確認用リンク)。

<div class="outer">
  <div class="inner">
  </div>
</div>

.outer {
  border-radius: 20px;
  border: solid black;
  height: 50px;
}

.inner {
  background: red;
  height: 50px;
}

これを解決するためには、以下の二つの方法があります。

1. 最初と最後の子要素 (li 要素) に対して border-radius プロパティを設定するようにする。
2. overflow プロパティに hidden を設定し、 li 要素のはみ出した部分を非表示にする。

一つ目の修正を実施する場合、質問文の CSS を以下のように修正することで問題が解決します (動作確認用リンク)。

body {
  max-width: 1140px;
  max-width: auto;
  margin: 0 auto;
  background-color: rgb(201, 197, 197);
}

.h3-list ul {
  padding-left: 0;
}

.h3-list li {
  background-color: #fff;
  padding-left: 10px;
  list-style-position: inside;
}

.h3-list li:first-child { /* 追記 */
  border-radius: 10px 10px 0 0;
}

.h3-list li:last-child { /* 追記 */
  border-radius: 0 0 10px 10px;
}

二つ目の場合には、以下のように修正します (動作確認用リンク)。

body {
  max-width: 1140px;
  max-width: auto;
  margin: 0 auto;
  background-color: rgb(201, 197, 197);
}

.h3-list ul {
  border-radius: 10px;
  padding-left: 0;
  overflow: hidden; /* 追記 */
}

.h3-list li {
  background-color: #fff;
  padding-left: 10px;
  list-style-position: inside;
}

Answer 3

おはようございます！
お速い回答本当にありがとうございます！
なるほど理解できました！
そーゆーことだったんですね！
スッキリしました！
本当に丁寧に回答していただきありがとうございます！。