Help us understand the problem. What is going on with this article?

border-radius

More than 1 year has passed since last update.

border-radiusとborder

border-radius(丸くする)が流行り始めました。borderと同時に指定する場面が多いので、注意点を一つ備忘録がてら投稿致します。

画像を含んだリスト

下記の.listクラスにborder-radius, borderを追加するとどうなるか。
image.png

<div class="list">
  <div><img class="img" src="https://placehold.jp/150x40.png"></div>
  <div class="item">リストアイテム</div>
  <div class="item">リストアイテム</div>
  <div class="item">リストアイテム</div>
</div>

 適用後

image.png

.list {
  display: block;
  border-radius: 20px;
  border: solid 1px gray;
  margin: 20px;
  width: 150px;
}

実は、こうなります。画像、リストアイテムの要素には、border-radiusが適用されるわけではありません。

解決方法

ですので、下記のように、上と下それぞれ適用する必要があります。

.img {
  display: block;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}
.item:last-child {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

image.png

mask-imageを使用する手段もありますが、画像を挿入する必要があるのでおすすめしません。

訂正

overflow: hiddenをご教授いただきました。
画像には、borderをつけたくない場合、上記のようにimgの上とitemの下にbroder-radiusを指定するか、.list, .item両者にborder-radiusを指定する方法が正確です。

.listにoverflow: hiddenを指定し、.itemにborder-radiusを指定しないと下記のようになるためです。
image.png

.list {
  display: block;
  border-radius: 20px;
  margin: 20px;
  width: 150px;
  overflow: hidden;
}
.item {
  border: solid 1px gray;
  box-sizing: border-box;
}
kudo_kk
フロントエンドエンジニア
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした