要素を角丸にする

要素の角を丸くする

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

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

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

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

CSS コード例

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

HTML コード例

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

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

パターン別の角丸

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

上の2角だけ角丸にする

CSS コード例

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

HTML コード例

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

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

左上と右下だけ角丸にする

CSS コード例

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

HTML コード例

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

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

値を3つ指定する

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

CSS コード例

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

HTML コード例

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

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