ボーダーの角丸
CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 40/76。
CSS では、border-radius プロパティを使用して、要素の角を丸くできます。このプロパティでは各角の曲率半径を指定できるため、要素の境界線の形状を調整できます。 以下は、border-radius プロパティを使用する基本的な構文です。
selector {
border-radius: value;
}value: 角を丸くするための半径。ピクセル単位（px）、em単位（em）、パーセンテージ（%）、またはその他の有効なCSS単位で指定できます。
- 単一の値を指定すると、4つすべての角に同じ半径を適用できます。次の例では、すべての
<div>要素の角が10pxの半径で丸くなります。
div {
border-radius: 10px;
}- 次の順序で、各角に異なる値を個別に設定できます：左上、右上、右下、左下。
.button {
border-radius: 10px 20px 30px 40px;
}- 値を2つだけ指定することもできます。1つ目の値は左上と右下の角に適用され、2つ目の値は右上と左下の角に適用されます。
img {
border-radius: 20px 50px;
}
チャレンジ
簡単クラス "one" と "two" がそれぞれ付いた 2 つの <div> 要素を含む HTML ドキュメントが与えられています。以下の手順に従ってください。
- クラスセレクターを使って、クラス “one” を持つすべての要素を対象とする CSS ルールを書きます。すべての角を同じ丸みのある形にするため、border を 3px solid #4287f5 に、border-radius を 15px に設定します。
- クラスセレクターを使って、クラス “two” を持つすべての要素を対象とする CSS ルールを書きます。border と border-radius を、それぞれ好きな 任意の値 に設定します。
自分で試してみよう
<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>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
CSSによるスタイリングのすべてのレッスン
自分で練習してみよう: Webプレイグラウンド