の 国境 は CSS の短縮プロパティであり、要素に境界線を追加するために使用されます。ボックスの境界線を指定できます。境界線の幅、スタイル、色を設定します。この CSS プロパティには、次の境界線プロパティが含まれます。

境界線の幅:border-width プロパティは、境界線の幅を設定するために使用されます。次のような事前定義された値を使用することもできます。 薄い、中程度、 そして 厚い 境界線の幅を設定します。枠線の太さを設定します。そのデフォルト値は次のとおりです 中くらい 。
このプロパティは単独で使用することはできません。これは常に、最初に境界線を設定するために、「border-style」プロパティなどの他の境界線プロパティとともに使用されます。そうしないと機能しません。
境界線の幅は、各辺ごとに異なる場合があります。これは、 border-bottom-width を使用して行うことができます。 ボーダー上部の幅、ボーダー右側の幅 、 そして 境界線の左幅 。ボーダースタイル：このプロパティは境界線のスタイルを指定します。境界線が実線、点線、破線、二重、溝、およびその他の可能な値のいずれかであるかどうかを定義します。このプロパティを設定しないと、つまり境界線スタイルを設定しないと、他の境界線プロパティは機能しません。指定しないと枠線が非表示になります。 ボーダースタイル 。これは、この CSS プロパティのデフォルト値が なし 。
に似ている 境界線の幅 、境界線のスタイルは各側で異なる場合があります。プロパティを使用して実行できます ボーダーボトムスタイル、ボーダートップスタイル、ボーダー右スタイル 、 そして ボーダー左スタイル 。ボーダの色：境界線の色を変更できます。色の名前、RGB 値、または 16 進値を使用して色を設定できます。に似ています 境界線の幅 そして ボーダースタイル では、境界線の色を個別に変更できます。つまり、要素の境界線の下、上、左、右側の色を変更できます。プロパティを使用して実行できます ボーダー下部の色、ボーダー上部の色、ボーダー右の色 、 そして 境界線の左の色 。
の ボーダの色 プロパティを単独で使用することはできません。境界線を設定するには、「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. 

出力