Border Radius

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 40/76。

CSSにおいて、border-radiusプロパティは要素の角を丸くするために使用されます。このプロパティを使用すると、各角の曲率の半径を指定でき、要素の境界線の形状を制御できます。 border-radiusプロパティを使用するための基本的な構文は次のとおりです：

selector {
    border-radius: value;
}

value: 角を丸くするための希望の半径。ピクセル (px)、エム (em)、パーセンテージ (%)、またはその他の有効なCSS単位で指定できます。

1つの値を指定することで、4つの角すべてに同じ半径を適用できます。次の例では、すべての <div> 要素の角が 10px の半径で丸められます。

div {
    border-radius: 10px;
}

各コーナーに対して、左上、右上、右下、左下の順序で、個別に異なる値を設定できます。

.button {
    border-radius: 10px 20px 30px 40px;
}

2つの値のみを指定することもできます。その場合、最初の値は左上と右下の角に、2番目の値は右上と左下の角に適用されます。

img {
    border-radius: 20px 50px;
}

チャレンジ

簡単

2つの<div>要素があり、それぞれに"one"と"two"というクラスが指定されたHTMLドキュメントがあります。以下の手順に従ってください。

クラスセレクタを使用して、クラス"one"を持つすべての要素を対象とするCSSルールを記述してください。すべての角に同じ丸みを与えるために、borderを3px solid #4287f5に、border-radiusを15pxに設定します。
クラスセレクタを使用して、クラス"two"を持つすべての要素を対象とするCSSルールを記述してください。borderを任意の値に、border-radiusを任意の値に設定してください。

チートシート

border-radiusプロパティは、要素の角を丸くします：

selector {
    border-radius: value;
}

値はピクセル（px）、em（em）、パーセンテージ（%）、またはその他の有効なCSS単位で指定できます。

単一の値 - すべての角に同じ半径を適用します：

div {
    border-radius: 10px;
}

4つの値 - 個別の角（左上、右上、右下、左下）：

.button {
    border-radius: 10px 20px 30px 40px;
}

2つの値 - 1つ目の値は左上と右下に、2つ目の値は右上と左下に適用されます：

img {
    border-radius: 20px 50px;
}

自分で試してみよう

<html>
<head>
    <title>Border Radius</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="one">This is a division with rounded corners.</div>
    <div class="two">This is another division with rounded corners.</div>
</body>
</html>