border
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
border は 一括指定 の CSS プロパティで、要素の境界を設定します。これは border-width, border-style, border-color の値を設定します。
試してみましょう
border: solid; border: dashed red; border: 1rem solid; border: thick double #32a1ce; border: 4mm ridge rgba(211, 220, 50, 0.6); <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section> #example-element { background-color: #eee; color: #8b008b; padding: 0.75em; width: 80%; height: 100px; } 構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* 種類 */ border: solid; /* 幅 | 種類 */ border: 2px dotted; /* 種類 | 色 */ border: outset #f33; /* 幅 | 種類 | 色 */ border: medium dashed green; /* グローバル値 */ border: inherit; border: initial; border: revert; border: revert-layer; border: unset; border プロパティは、以下に挙げる値の 1 ～ 3 つを使用して指定します。値の順序は関係ありません。
メモ: style が指定されていない場合は境界線は表示されません。 style の既定値が none だからです。
値
<line-width>-
境界線の太さを設定します。指定されなかった場合は既定値の
mediumになります。border-widthを参照してください。 <line-style>-
境界線の種類を設定します。指定されなかった場合は既定値の
noneになります。border-styleを参照してください。 <color>-
境界線の色を設定します。指定されなかった場合は既定値で要素の
colorプロパティになります。border-colorを参照してください。
解説
他の一括指定プロパティと同様、省略された部分値は初期値に設定されます。重要なことですが、 border は border-image のカスタム値を指定することができず、初期値、つまり none に設定します。
border による一括指定は、四辺をすべて同じに設定したい場合に特に便利です。しかし、それぞれが異なる場合は、それぞれの辺に異なる値を設定できる個別指定の border-width、 border-style、 border-color プロパティを使用してください。他に、一度に一つの境界線を対象とした、物理的 (border-top など) や論理的 (border-block-start など) な境界線プロパティを使用することもできます。
境界線と輪郭線
境界線と輪郭線はよく似ています。しかし、輪郭線は以下の点で境界線とは異なります。
- 輪郭線は領域を占有せず、要素のコンテンツの外側に描画されます。
- 輪郭線は普通は矩形ですが、仕様によれば、矩形である必要はありません。
公式定義
形式文法
border =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
例
ピンク色の出っ張った境界の設定
HTML
<div>ここには境界線、概要、ボックスシャドウがあります！すごいと思いませんか？</div> CSS
div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; } 結果
仕様書
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # propdef-border |
ブラウザーの互換性
Loading…