CSSボーダー

CSS境界プロパティを使用して、HTML要素の境界線を設定します.
Borderプロパティは、境界線のスタイル、色、幅を定義する3つのサブプロパティに対して短縮されます.
例:

border: 1px solid red;

文法

border: border-width border-style color;

ボーダー幅👻

境界線の厚さを設定します.不在の場合、デフォルトは媒体です.

border-width: thin | medium | thick;

OR

border-width: border-top-width border-right-width border-bottom-width border-right-width;
border-width: 0 4px 8px 12px;

ボーダースタイル🙅‍♀️

境界のスタイルを設定します.欠落した場合、デフォルトはNoneです.

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

色🎨

境界の色を設定します.が存在しない場合、デフォルト値はcurrentColorになります.

border-color: red;
border-color: border-top-color border-right-color border-bottom-color border-right-color
border-color: red yellow green pink;

CSS個々の国境

ボーダーのサブプロパティとプロパティは、Web要素の個々の側にも適用できます.
文法

border-left: green;
border-top: pink;
border-right: blue;
border-bottom: skyblue;

ボーダーインライン✣

これは、要素の書き込みモード、方向性、およびテキストの向きに応じて物理的なボーダースタイルに対応します

border-inline-start: 8px solid red;

出力:

border-inline-end: 8px solid red;

出力:

ボーダー・インライン・スタイル✣

The border-inline-start-style CSSプロパティは、要素の書き込みモード、方向性、およびテキストの向きに応じて物理的な境界スタイルにマップされる、要素の論理的なインライン開始/終了境界のスタイルを定義します.
文法

border-inline-start-style: dotted | dashed | groove; 

例:

border-inline-start-style: dashed;
writing-mode: horizontal-tb;
border-inline-end-style: dotted;

出力:

ボーダーブロック▀

ボーダーブロックエンドCSSプロパティは、スタイルシート内の個々の論理ブロック終了境界プロパティ値を1つの場所に設定するための短縮プロパティです.
文法

border-block-end: border-block-end-width border-block-end-style border-block-end-color;

例:

border-block-start: 1px solid red;

出力:

border-block-end: 1px solid red;

出力:

ボーダーイメージ🏙

border image cssプロパティは、指定した要素の周囲にイメージを描画します.要素の規則的な境界線を置き換えます.
文法

border-image: source || slice / width / outset || repeat;

ボーダーイメージアウトセット

ボーダーイメージリピート

ボーダーイメージスライス

ボーダーイメージソース

ボーダーイメージ幅

1️⃣ ボーダーイメージアウトセット

角border-image-outset Count - Chergプロパティは、境界ボックスから要素の境界イメージを設定する距離を設定する.
要素の外側の端からの境界イメージの距離.つの値まで指定できます.
要素の境界ボックスの外側に表示される境界画像の一部をborder-image-outset はオーバーフローのスクロールバーをトリガーしないでマウスイベントを捕捉しない.

// this will be inside
border-image-outset: 0;

// this will be outside of div 30px
border-image-outset: 30px;

border image outsetプロパティは、1、2、3、または4つの値として指定することができます.
それぞれの値は長さ/数です.負の値は無効であり、境界イメージoutset宣言を無視します.

border-image-outset: 1px 3px 4px 10px;

2️⃣ ボーダーイメージリピート

border image repeat cssプロパティは、ソースイメージのエッジ領域を要素の境界イメージの寸法に合うように調整する方法を定義します.

border-image-repeat: stretch | round | repeat | space;

/* vertical | horizontal */
border-image-repeat: round stretch;

stretchソースイメージのエッジ領域は、各々の境界線間のギャップを満たすために伸張される.repeatソースイメージのエッジ領域は、各々の境界線間のギャップを満たすためにタイル張り(繰り返される)である.タイルは、適切なフィットを達成するためにクリップされることがあります.roundソースイメージのエッジ領域は、各々の境界線間のギャップを満たすためにタイル張り(繰り返される)である.タイルは、適切なフィットを達成するために伸ばすことができる.spaceソースイメージのエッジ領域は、各々の境界線間のギャップを満たすためにタイル張り(繰り返される)である.余分なスペースは、適切なフィットを達成するためにタイルの間に配布されます.

3️⃣ ボーダーイメージスライス

ボーダーイメージスライスCSSプロパティは、境界イメージソースによって指定されたイメージを領域に分割します.これらの領域は、要素の境界イメージのコンポーネントを形成します.

/* All sides */
border-image-slice: 30;

/* vertical | horizontal */
border-image-slice: 10% 30%;

/* top | right | bottom | left */
border-image-slice: 7 12 14 5;

スライスプロセスは、合計で9つの領域を作成します.つのスライス線は、それらのそれぞれの側から与えられた距離をセットして、領域の大きさを制御する.

ゾーン1〜4は角コーナー領域である.それぞれは、最終的な境界線イメージの角を形成するために、一回の時間を使用します.

ゾーン5−8は、辺縁領域である.これらはrepeated, scaled, or otherwise modified 要素の寸法に一致する最後の境界線イメージで.

ゾーン9は、中中間領域である.デフォルトでは捨てられますが、キーワード画像がfill がセットされる.

ボーダーイメージリピート、ボーダーイメージ幅、およびボーダーイメージのアウトセットプロパティは、これらの領域が最終的なボーダーイメージを形成するために使用される方法を決定します.

4️⃣ ボーダーイメージソース

border image source cssプロパティは、要素の境界イメージを作成するために使用するソースイメージを設定します.

border-image-source: url('/media/examples/border-diamonds.png');

border-image-source: linear-gradient(to top, red, yellow);

border-image-source: repeating-linear-gradient(45deg, transparent, #4d9f0c 20px);

5️⃣ ボーダーイメージ幅

border image width cssプロパティは、要素の境界線画像の幅を設定します.

/* top | right | bottom | left */
border-image-width: 5% 2em 10% auto;

いくつかのボーダー&ボーダーイメージの例を作成しました.

・CSS Border and Border Image・

・Animated Border・

・Button Border Effect on hover・

リファレンス🧐

・MDN CSS Border・

・MDN CSS Border Image・

畝
👩🏻‍💻 Suprabha.me
畝