HTML & CSS

最終更新日:
公開日:

レシピ

エフィクト

要素を角丸にする

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

この記事のポイント

  • 要素の角を角丸にする
  • 特定の角だけ角丸にする

目次

要素の角を丸くする

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つの場合はどうなるかも解説します。

値を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)は右下に適用されます。