メインコンテンツへ移動するサイト内検索へ移動する

枠線

border-radius

要素の境界を角丸にする

valuedescription
4px角丸の半径をpxで指定する
25% 10%左上と右下の半径、右上と左下の半径を個別に指定する
10% 30% 50% 70%角丸の半径を個別に指定する
9999px角丸を最大にする

Demo

A
B
C
D
<div class="wrapper">
  <div class="card card-1">
    A
  </div>
  <div class="card card-2">
    B
  </div>
  <div class="card card-3">
    C
  </div>
  <div class="card card-4">
    D
  </div>
</div>

.card-1 {
  border-radius: 4px;
}
.card-2 {
  border-radius: 50%;
}
.card-3 {
  border-radius: 9999px;
}
.card-4 {
  border-radius: 10% 30% 40% 70%;
}

.card {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgb(56, 189, 248);
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

概要

通常、要素の境界は長方形に設定されています。border-radiusを利用することで、この境界を角丸にすることができます。 プロパティ名にborderとついていますが、borderではなく要素自体の形を変更します。例えば背景色を指定した要素にborder-radiusを適用した場合、背景色も角丸に切り取られます。

9999pxのテクニック

border-radiusにとても大きな数字を指定するテクニックが存在します。Demo の C パターンのように角丸長方形を実現でき、ボタンなどに多用されます。 本来999pxや9999pxのような関係のない数値を指定するのは避けるべきとされますが（コードから意図が読み取りづらいため）、border-radiusの場合は有名なテクニックですので許容範囲内だと考えています。

なお50%を指定した場合、正方形の場合は正常に動作しますが、長方形の場合は Demo の B パターンのように楕円になってしまいます。

さらにいびつな形を実現する

実はborder-radiusには最大 8 つの値を指定することができます。

.box {
  border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

詳細は割愛しますが、以下のようないびつな形を作り出すことができます。

なお、このような形を人力で調整するのは至難の業であるため、コードジェネレータが複数公開されています。 興味のある方は「CSS border-radius generator」などで調べてみてください。 （FANCY-BORDER-RADIUSはその一つです）

関連

参照