Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@kudo_kk

border-radius

More than 3 years have 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;
}
0
Help us understand the problem. What is going on with this article?
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
kudo_kk
フロントエンドエンジニア

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?