HTML & CSS

レシピ

エフィクト

要素を角丸にする

HTML要素を角丸にする方法を解説します。4角のみでなく、上の2角だけなど特定の部分だけ角丸にする方法もあわせて紹介します。

この記事のポイント

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

目次

要素の角を丸くする

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

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

通常の角が四角い状態
通常の角が四角い状態

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

角丸にした状態
角丸にした状態

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

コード例

<style>
section {
	margin: 20px auto;
	padding: 20px;
	width: 460px;
	border-radius: 10px;
	border: 2px solid #ccc;
}
</style>
<section>
	<h2>角丸にする</h2>
	<p>CSSを使うと要素の4角を角丸にすることができます。<br>上の2角だけや、1角だけ、角ごとに違う丸みにすることができます。</p>
</section>

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

パターン別の角丸

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

上の2角だけ角丸にする

上だけ角丸
上だけ角丸

コード例

<style>
section {
	margin: 20px auto;
	padding: 20px;
	width: 460px;
	border-radius: 20px 20px 0 0;
	border: 2px solid #ccc;
}
</style>
<section>
	<h2>角丸にする</h2>
	<p>CSSを使うと要素の4角を角丸にすることができます。<br>上の2角だけや、1角だけ、角ごとに違う丸みにすることができます。</p>
</section>

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

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

左上と右下の角だけ丸くする
左上と右下の角だけ丸くする

コード例

<style>
section {
	margin: 20px auto;
	padding: 20px;
	width: 460px;
	border-radius: 20px 0;
	border: 2px solid #ccc;
}
</style>
<section>
	<h2>角丸にする</h2>
	<p>CSSを使うと要素の4角を角丸にすることができます。<br>上の2角だけや、1角だけ、角ごとに違う丸みにすることができます。</p>
</section>

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

値を3つ指定する

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

値を3つ指定したときの表示例
値を3つ指定したときの表示例

コード例

<style>
section {
	margin: 20px auto;
	padding: 20px;
	width: 460px;
	border-radius: 20px 40px 0;
	border: 2px solid #ccc;
}
</style>
<section>
	<h2>角丸にする</h2>
	<p>CSSを使うと要素の4角を角丸にすることができます。<br>上の2角だけや、1角だけ、角ごとに違う丸みにすることができます。</p>
</section>

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

こちらの記事は役に立ちましたか?

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

ありがとうございます。
コメントを送信しました。