【CSS】border-radiusで角丸を指定しよう、一括指定・画像・アニメーションまで解説

シュウ

公開日: 2020.02.26 / 更新日: 2026.11.03
今回は【CSS】border-radiusで角丸を指定しよう!の解説になります!

こんな方に読んでほしい

CSSを学び始めた方
CSSの基本を学習中で、要素の見た目を調整する方法を知りたい方です。
border-radiusの書き方が分からない方
基本の書き方から、上下左右の指定、一括指定までを整理して理解したい方です。
画像を角丸にしてアニメーションにも挑戦したい方
画像にborder-radiusを指定し、簡単なアニメーションを作ってみたい方です。

[記事の内容]

border-radiusとは

border-radiusは、要素の角を丸くするためのCSSプロパティです。
Webサイトのボタンやカード、画像など、さまざまな場面で使用されています。

border-radiusを使用する例

1コンテンツ(ボックス)を角丸にする
2ボタンデザインを角丸にする
3画像を角丸や円形にする　など

border-radiusの基本的な使い方

border-radiusの基本的な書き方は、数値+単位を指定します。
まずは、角丸にしたい要素をHTMLで用意します。

<div class="radius">border-radius</div>

次に、CSSでborder-radiusを指定します。枠線(border)を付けると、角丸の状態が分かりやすくなります。

.radius {
  display: block;
  width: 240px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  margin: 50px auto;
  border: solid 5px #5e88a9;

  border-radius: 20px; /*--border-radius指定--*/
}

●①border: solid 5px #5e88a9;: 角丸の状態が分かりやすいように、borderで枠線を指定しています。

●②border-radius: 20px;: 要素の四隅を、半径20pxの円弧で角丸にします。

See the Pen
xxGdPaQ by shu (@shu0325)
on CodePen.

全体を角丸にしたい場合は、border-radius: 20px;と指定します。
半径20pxの正円の円弧を基準に、上下左右の四隅すべてが角丸になります。

border-radiusを上下左右に個別指定する方法

角ごとに指定したい場合は、以下の4つのプロパティを使用します。

●①border-top-left-radius: 左上の角を丸くします。

●②border-top-right-radius: 右上の角を丸くします。

●③border-bottom-right-radius: 右下の角を丸くします。

●④border-bottom-left-radius: 左下の角を丸くします。

実際のコードと表示結果は以下のようになります。

See the Pen
KKpmZpQ by shu (@shu0325)
on CodePen.

コードを見る

<p class="radius01 b_main">01:角丸(左上)のみ指定</p>
<p class="radius02 b_main">02:角丸(右上)のみ指定</p>
<p class="radius03 b_main">03:角丸(右下)のみ指定</p>
<p class="radius04 b_main">04:角丸(左下)のみ指定</p>
<p class="radius05 b_main">05:角丸(左上、右上)のみ指定</p>
<p class="radius06 b_main">06:角丸(左下、右下)のみ指定</p>

.b_main {
  display: block;
  width: 280px;
  height: 60px;
  line-height: 60px;
  color: #333333;
  text-align: center;
  background-color: #e2d0b6;
  margin: 30px auto;
  border: solid 5px #5e88a9;
}

.radius01 {
  border-top-left-radius: 30px; /*--01:角丸(左上)のみ指定--*/
}

.radius02 {
  border-top-right-radius: 20px; /*--02:角丸(右上)のみ指定--*/
}

.radius03 {
  border-bottom-right-radius: 20px; /*--03:角丸(右下)のみ指定--*/
}

.radius04 {
  border-bottom-left-radius: 20px; /*--04:角丸(左下)のみ指定--*/
}

.radius05 {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px; /*--05:角丸(左上、右上)のみ指定--*/
}

.radius06 {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px; /*--06:角丸(左下、右下)のみ指定--*/
}

指定したい角のプロパティだけを記述すれば、その角だけを角丸にできます。

border-radiusを一括指定(ショートハンド)する方法

border-radius: 左上右上右下左下;のように、半角スペースで区切って値を並べると、左上を基準に時計回りで一括指定できます。

.radius01 {
  /*--50px(左上) 10px(右上) 50px(右下) 10px(左下)--*/
  border-radius: 50px 10px 50px 10px;
}

●①左上 → 右上 → 右下 → 左下の順に指定: 左上を起点に時計回りで、50px(左上)、10px(右上)、50px(右下)、10px(左下)の角丸になります。

●②値を省略した場合: 値が1つなら四隅すべて、2つなら「左上と右下」「右上と左下」に同じ値が適用されます。

See the Pen
ZEGKvpq by shu (@shu0325)
on CodePen.

角丸をさらに詳細に指定する方法(横の値 / 縦の値)

/(スラッシュ)を挟み、前の値は横の値、後ろの値は縦の値になります。
横と縦で異なる半径を指定すると、楕円を基準にした角丸になります。

.radius01 {
  /*--横の値(5px 10px 15px 20px) / 縦の値(50px 60px 70px 80px)--*/
  border-radius: 5px 10px 15px 20px / 50px 60px 70px 80px;
}

●①/ より前の値: 左上・右上・右下・左下の順で、各角の横方向の半径を指定します。

●②/ より後ろの値: 同じ順番で、各角の縦方向の半径を指定します。

See the Pen
poJPpGG by shu (@shu0325)
on CodePen.

img画像にborder-radiusを指定してみよう

imgタグにborder-radiusを指定すると、画像も角丸にできます。
角丸の大きさによって、画像の印象が大きく変わります。

See the Pen
GRJmQaz by shu (@shu0325)
on CodePen.

コードを見る

ul.img_list01 {
  text-align: center;
  overflow: hidden;
  margin: 60px 0;
}

ul.img_list01 li {
  margin: 0 10px;
  display: inline-block;
}

.img01 img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
}

.img02 img {
  width: 150px;
  height: 150px;
  border-radius: 30px;
}

.img03 img {
  width: 150px;
  height: 150px;
  border-radius: 40px;
}

.img04 img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

px指定でimg画像を角丸にする方法

画像の大きさに対して固定の半径で角丸にしたい場合は、pxで指定します。
一括指定や、横の値 / 縦の値を使った指定も可能です。

See the Pen
GRJmxmV by shu (@shu0325)
on CodePen.

.img01 img {
  width: 150px;
  height: 150px;
  border-radius: 40px;
}

See the Pen
oNXWqEm by shu (@shu0325)
on CodePen.

.img01 img {
  width: 150px;
  height: 150px;
  border-radius: 50px 10px 50px 10px;
}

.img02 img {
  width: 150px;
  height: 150px;
  border-radius: 15px 10px 35px 10px / 50px 30px 70px 80px;
}

●①border-radius: 40px;: 画像の四隅を、半径40pxで均等に角丸にします。

●②border-radius: 50px 10px 50px 10px;: 左上と右下を大きく、右上と左下を小さく角丸にします。

●③15px 10px 35px 10px / 50px 30px 70px 80px: /の前後で横と縦の値を分けて指定し、角ごとに異なる形の丸みを作ります。

%指定でimg画像を角丸にする方法

縦横比率が同じ(正方形)の画像にborder-radius: 50%;を指定すると、正円になります。
%は画像の幅・高さに対する割合になるため、画像サイズが変わっても形を保てます。

See the Pen
wvadmxW by shu (@shu0325)
on CodePen.

.img01 img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.img02 img {
  width: 150px;
  height: 150px;
  border-radius: 40% 40% 50% 40% / 30% 50% 50% 50%;
}

●①border-radius: 50%;: 正方形の画像を正円にします。アイコン画像やプロフィール画像でよく使われる指定です。

●②40% 40% 50% 40% / 30% 50% 50% 50%: %でも横の値 / 縦の値を指定でき、有機的なゆがんだ形を作れます。

border-radiusを使用したアニメーション

最後に、border-radiusを使った簡単なアニメーションを紹介します。
まずは、hover時に角丸の形が変化する例です。

See the Pen
RwPVMmN by shu (@shu0325)
on CodePen.

コードを見る

.img01 img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  transition: all 0.3s;
}

.img01 img:hover {
  border-radius: 0;
}

.img02 img {
  width: 150px;
  height: 150px;
  border-radius: 0;
  transition: all 0.3s;
}

.img02 img:hover {
  border-radius: 40% 40% 50% 40% / 30% 50% 50% 50%;
}

●①transition: all 0.3s;: 変化を0.3秒かけてなめらかに切り替えます。

●②:hover: マウスカーソルを合わせたときのborder-radiusを指定します。

次は、@keyframesを使用して、角丸の大きさが繰り返し変化するアニメーションです。

See the Pen
mdJmLNB by shu (@shu0325)
on CodePen.

コードを見る

ul.img_list01 li img {
  border: 5px solid #5c87a6;
  animation: radius 4s linear infinite;
  width: 150px;
  height: 150px;
}

@keyframes radius {
  0% {
    border-radius: 0%;
  }

  25% {
    border-radius: 30%;
  }

  50% {
    border-radius: 50%;
  }

  75% {
    border-radius: 70%;
  }

  100% {
    border-radius: 0%;
  }
}

●①animation: radius 4s linear infinite;: アニメーション名radiusを、4秒・一定の速度で無限に繰り返します。

●②@keyframes radius: アニメーションの途中経過を定義します。border-radiusを0% → 30% → 50% → 70% → 0%と変化させています。

まとめ

今回は、Webサイト制作でよく使用されるCSSプロパティborder-radiusの使い方を紹介しました。
基本の書き方から、上下左右の個別指定、一括指定(ショートハンド)、横の値 / 縦の値の指定、画像への適用、アニメーションまで解説しました。
border-radiusとアニメーションを組み合わせると、表現の幅がさらに広がりますので、ぜひ挑戦してみてください。