CSSのborder-radiusプロパティは、要素の角を丸くするために使用します。このプロパティを使用することで、ボックスの角を滑らかにし、要素のデザインを柔らかくします。値には、ピクセルやパーセントを指定できます。
INDEX
border-radiusプロパティの値とその効果の一覧
border-radius: 10px;– 要素の角を10px丸めます。border-radius: 50px;– 要素の角を50px丸めます。border-radius: 50%;– 要素の角を50%丸め、円形に近い形にします。
注意点や関連情報
border-radiusプロパティは、四隅に別々の値を指定することもできます。例えば、border-radius: 10px 20px 30px 40px;のように指定すると、各角の丸みを異なる値に設定できます。また、要素が正方形の場合、border-radius: 50%;を使用すると、完全な円形が作成されますが、長方形の要素には楕円形が適用されます。
border-radiusが効かない理由として考えられること
要素に背景がない
border-radiusは要素に色がない場合、その効果が視覚的に確認できません。
対策：要素に色やボーダーを設定し、border-radiusが適用されているか確認します。
要素のoverflowが影響している
border-radiusの効果は、overflowプロパティがhiddenやautoで設定されていない場合、要素の内容がはみ出して見えなくなることがあります。
対策：overflow: hidden;を設定し、要素の内容がはみ出さないようにして、border-radiusの効果を適切に表示させます。
共通するCSSコード
.css-sample-container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
background-color: #f9f9f9;
padding: 20px;
margin: 20px auto;
text-align: center;
}
.css-sample-item {
width: 200px;
padding: 10px;
background-color: #cce7ff;
}
border-radius: 10px;
要素の角を10px丸めます。小さめの丸みで、デザインに柔らかさを加えます。
HTMLコード
<div class="css-sample-container css-sample-border-radius-10">
<div class="css-sample-item">Radius 10px</div>
</div>
CSSコード
.css-sample-border-radius-10 {
border: 3px solid #99ccff;
border-radius: 10px;
}
表示結果
Radius 10px
border-radius: 50px;
要素の角を50px丸めます。大きな丸みが強調され、柔らかい印象を与えます。
HTMLコード
<div class="css-sample-container css-sample-border-radius-50">
<div class="css-sample-item">Radius 50px</div>
</div>
CSSコード
.css-sample-border-radius-50 {
border: 3px solid #99ccff;
border-radius: 50px;
}
表示結果
Radius 50px
border-radius: 50%;
要素の角を50%丸めます。正方形の要素には円形の枠線が適用されます。
HTMLコード
<div class="css-sample-container css-sample-border-radius-50-percent">
<div class="css-sample-item">Radius 50%</div>
</div>
CSSコード
.css-sample-border-radius-50-percent {
border: 3px solid #99ccff;
border-radius: 50%;
}
表示結果
Radius 50%
まとめ
border-radiusプロパティは、要素の角を丸くするために使用します。- 値にはピクセルやパーセントを指定できます。パーセント指定で円形や楕円形を作成できます。
- 四隅に異なる丸みを適用することも可能です。