要素を角丸にする

HTML要素を角丸にする方法を解説します。上下左右の四角一括指定のみでなく、左上と右上の二つの角だけなど特定の部分だけ角丸にする方法もあわせて紹介します。

この記事のポイント

HTML要素はCSSのborder-radiusプロパティを使うと、角に丸みを持たせることができます。

まずは通常の角丸なし状態はこちら。

続いて、角丸にした状態です。

角丸を設定するのは非常に簡単です。
次のコードの中で、border-radiusプロパティの部分で角丸を作っています。

<style>
section {
  margin: 20px auto;
  padding: 20px;
  width: 460px;
  border-radius: 10px;
  border: 2px solid #ccc;
}

<section>
  <h2>角丸にする</h2>
  <p>CSSを使うと要素の4角を角丸にすることができます。<br>上の2角だけや、1角だけ、角ごとに違う丸みにすることができます。</p>
</section>

4つの全ての角を角丸にする場合は1つだけ値を設定すれば大丈夫ですが、4つの角それぞれに角丸を指定していくことも可能です。

ここからは、いくつかのパターン別に角丸の設定方法を解説します。

section {
  margin: 20px auto;
  padding: 20px;
  width: 460px;
  border-radius: 20px 20px 0 0;
  border: 2px solid #ccc;
}

<section>
  <h2>角丸にする</h2>
  <p>CSSを使うと要素の4角を角丸にすることができます。<br>上の2角だけや、1角だけ、角ごとに違う丸みにすることができます。</p>
</section>

今回は値を4つ指定していますが、前から順に左上(20px)、右上(20px)、右下(0px)、左下(0px)を指定しています。

section {
  margin: 20px auto;
  padding: 20px;
  width: 460px;
  border-radius: 20px 0;
  border: 2px solid #ccc;
}

<section>
  <h2>角丸にする</h2>
  <p>CSSを使うと要素の4角を角丸にすることができます。<br>上の2角だけや、1角だけ、角ごとに違う丸みにすることができます。</p>
</section>

少し特殊な形ですが、border-radiusプロパティの値を2つ指定して左上と右下の角を丸くしています。

ここまで、border-radiusプロパティの指定について値1つ、4つ、2つのパターンをみてきたので、3つの場合はどうなるかも解説します。

section {
  margin: 20px auto;
  padding: 20px;
  width: 460px;
  border-radius: 20px 40px 0;
  border: 2px solid #ccc;
}

<section>
  <h2>角丸にする</h2>
  <p>CSSを使うと要素の4角を角丸にすることができます。<br>上の2角だけや、1角だけ、角ごとに違う丸みにすることができます。</p>
</section>

値を3つ指定した場合、1つ目の値(20px)は左上、2つ目の値(40px)は右上と左下、3つ目の値(0px)は右下に適用されます。

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。