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…