の 国境 は CSS の短縮プロパティであり、要素に境界線を追加するために使用されます。ボックスの境界線を指定できます。境界線の幅、スタイル、色を設定します。この CSS プロパティには、次の境界線プロパティが含まれます。
このプロパティは単独で使用することはできません。これは常に、最初に境界線を設定するために、「border-style」プロパティなどの他の境界線プロパティとともに使用されます。そうしないと機能しません。
境界線の幅は、各辺ごとに異なる場合があります。これは、 border-bottom-width を使用して行うことができます。 ボーダー上部の幅、ボーダー右側の幅 、 そして 境界線の左幅 。
に似ている 境界線の幅 、境界線のスタイルは各側で異なる場合があります。プロパティを使用して実行できます ボーダーボトムスタイル、ボーダートップスタイル、ボーダー右スタイル 、 そして ボーダー左スタイル 。
の ボーダの色 プロパティを単独で使用することはできません。境界線を設定するには、「border-style」プロパティなどの他の境界線プロパティとともに使用する必要があります。そうしないと機能しません。
境界線と輪郭線
境界線とアウトラインはよく似ていますが、アウトラインと境界線の間には次のようないくつかの違いがあります。
- アウトラインを使用すると、要素の 4 つの側面に異なるアウトラインの幅、スタイル、色を適用できませんが、境界線では、要素の 4 つの側面すべてに指定された値を適用できます。
- 境界線は要素の寸法の一部ですが、輪郭は要素の寸法の一部ではありません。つまり、要素に適用するアウトラインの太さに関係なく、要素の寸法は変わりません。
border プロパティを理解するために例を見てみましょう。
例
p{ border: 4px blue; font-size: 20px; color: red; text-align: center; } p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} <p>No border.</p> <p>A dotted border.</p> <p>A dashed border.</p> <p>A solid border.</p> <p>A double border.</p> <p>A groove border.</p> <p>A ridge border.</p> <p>An inset border.</p> <p>An outset border.</p> <p>A hidden border.</p> 今すぐテストしてください 出力
さて、両方を使用する別の例があります。 概要 そして 国境 プロパティ。
例
div { border: 3px solid red; outline: 3px solid blue; border-radius: 12px; font-size: 20px; font-weight: bold; margin: 30px; padding: 30px; outline-offset: 0.5em; } <h3> Welcome to the javaTpoint.com </h3> In this div element, we are using both outline and border properties. The outline is represented by blue color and border is by red color. 今すぐテストしてください 出力
