Webサイトをもっとおしゃれに！CSSで角丸デザインを取り入れる
CSSで角丸を作る
CSSの border-radius プロパティを使って、要素の角を丸くすることができます。これは、ボタン、画像、ボックスなど、さまざまな要素に適用できます。
基本的な使い方
border-radius プロパティは、半径の値を指定して使用します。半径の値は、ピクセル、パーセンテージ、またはその他の単位で指定できます。
.element {
border-radius: 10px;
}
上記の例では、すべての角が半径10pxの円弧で丸められます。
四隅個別に設定
四隅それぞれの角丸半径を個別に設定することもできます。その場合は、左上、右上、右下、左下の順に値を指定します。
.element {
border-radius: 10px 20px 30px 40px;
}
上記の例では、左上が10px、右上が20px、右下が30px、左下が40pxの角丸になります。
楕円形の角丸
border-radius プロパティは、2つの値を指定することで、楕円形の角丸を作ることができます。
.element {
border-radius: 10px 20px / 5px 10px;
}
上記の例では、横方向の半径は10px、縦方向の半径は20px、横方向の楕円率は5px、縦方向の楕円率は10pxの角丸になります。
ブラウザ互換性
border-radius プロパティは、すべての主要なブラウザでサポートされています。ただし、古いブラウザではサポートされていない場合があります。
border-radius プロパティを使って、簡単に角丸を作ることができます。さまざまな設定を組み合わせることで、さまざまなデザインを表現することができます。
<div class="element"></div>
.element {
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 10px;
}
<div class="element"></div>
.element {
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 10px 20px 30px 40px;
}
<div class="element"></div>
.element {
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 10px 20px / 5px 10px;
}
ボタン
<button class="button">ボタン</button>
.button {
width: 100px;
height: 50px;
background-color: #000;
color: #fff;
border: none;
border-radius: 5px;
}
画像
<img src="image.jpg" class="image">
.image {
width: 200px;
height: 200px;
border-radius: 10px;
}
ボックス
<div class="box"></div>
.box {
width: 300px;
height: 200px;
background-color: #ccc;
border: 1px solid #ddd;
border-radius: 10px;
}
CSSで角丸を作るその他の方法
border-image プロパティを使って、角丸の画像を指定することができます。
.element {
border-image: url(image.png) 10 repeat;
}
上記の例では、image.png という画像を角丸の画像として指定しています。10 は画像の繰り返し回数、repeat は画像の繰り返し方を指定しています。
::before 疑似要素を使って、角丸の背景を生成することができます。
.element {
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ccc;
border-radius: 10px;
}
}
上記の例では、::before 疑似要素を使って、角丸の背景を生成しています。content: "" は、疑似要素内に何も表示しないことを指定しています。
SVGを使って、角丸の形状を定義することができます。
<svg viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" rx="10" />
</svg>
上記の例では、rx="10" で角丸の半径を指定しています。
ライブラリ
角丸を作るためのCSSライブラリもいくつかあります。
これらのライブラリを使うと、より簡単に複雑な角丸を作ることができます。
border-radius プロパティ以外にも、CSSで角丸を作る方法はいくつかあります。それぞれの方法にはメリットとデメリットがあるので、目的に合った方法を選ぶことが重要です。
cross-browser rounded-corners css
