TECH I.S.

CSS の丸みを帯びた境界線


CSS の丸みを帯びた境界線

border-radiusプロパティは、要素に丸い境界線を追加するために使用されます。

通常の境界線

丸いボーダー

丸みを帯びたボーダー

最も丸い境界線

p {   border: 2px solid red;   border-radius: 5px; }

自分で試してみる »


その他の例

1 つの宣言ですべての上境界線のプロパティこの例では、1 つの宣言で上部境界線のすべてのプロパティを設定するための省略形のプロパティを示します。

下ボーダーのスタイルを設定するこの例は、下の境界線のスタイルを設定する方法を示しています。

左ボーダーの幅を設定するこの例は、左境界線の幅を設定する方法を示しています。

4 つの境界線の色を設定しますこの例では、4 つの境界線の色を設定する方法を示します。 1 色から 4 色まで指定できます。

右枠の色を設定するこの例は、右の境界線の色を設定する方法を示しています。


演習で自分自身をテストする

エクササイズ:

<p> 要素に「4px」、「点線」、「赤」の境界線を設定するには、border 短縮形プロパティを使用します。

<style>p {  : ;}</style>    <body>  <h1>This is a heading</h1>  <p>This is a paragraph</p>  <p>This is a paragraph</p></body></pre>

演習を開始する


すべての CSS ボーダー プロパティ

財産

説明

国境 1 つの宣言ですべての境界プロパティを設定します
ボーダーボトム 1 つの宣言ですべての下枠プロパティを設定します
ボーダーボトムカラー 下枠の色を設定します
ボーダーボトムスタイル 下ボーダーのスタイルを設定します
ボーダー底幅 下ボーダーの幅を設定します
ボーダの色 4 つの境界線の色を設定します
ボーダーレフト 1 つの宣言ですべての左境界プロパティを設定します
ボーダー左の色 左ボーダーの色を設定します
左ボーダースタイル 左ボーダーのスタイルを設定します
ボーダー左幅 左ボーダーの幅を設定します
ボーダー半径 角を丸くするための 4 つの border-*-radius プロパティすべてを設定します
ボーダーライト 1 つの宣言ですべての右側の境界プロパティを設定します
ボーダー右の色 右ボーダーの色を設定します
ボーダーライトスタイル 右ボーダーのスタイルを設定します
ボーダー右幅 右ボーダーの幅を設定します
ボーダースタイル 4 つの境界線のスタイルを設定します
ボーダートップ 1 つの宣言ですべての上境界線のプロパティを設定します
ボーダートップカラー 上の境界線の色を設定します
ボーダートップスタイル 上ボーダーのスタイルを設定します
ボーダートップ幅 上ボーダーの幅を設定します
ボーダー幅 4 つの境界線の幅を設定します


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細