border-bottom-style

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-bottom-style は CSS のプロパティで、要素の下側の境界線 (border) のスタイルを設定します。

試してみましょう

border-bottom-style: none;

border-bottom-style: dotted;

border-bottom-style: dashed;

border-bottom-style: solid;

border-bottom-style: groove;

border-bottom-style: inset;

<section 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: #000; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; } body { background-color: #fff; }

メモ: 仕様書では、異なるスタイルの境界線を角でどの様に接続するかを定義していません。

構文

css

/* キーワード値 */ border-bottom-style: none; border-bottom-style: hidden; border-bottom-style: dotted; border-bottom-style: dashed; border-bottom-style: solid; border-bottom-style: double; border-bottom-style: groove; border-bottom-style: ridge; border-bottom-style: inset; border-bottom-style: outset; /* グローバル値 */ border-bottom-style: inherit; border-bottom-style: initial; border-bottom-style: revert; border-bottom-style: revert-layer; border-bottom-style: unset;

border-bottom-style プロパティは、単一の <line-style> キーワード値で指定します。

公式定義

初期値	`none`
適用対象	すべての要素。 `::first-letter` にも適用されます。
継承	なし
計算値	指定通り
アニメーションの種類	離散値

形式文法

border-bottom-style = 
 <line-style> 

<line-style> = 
 none |
 hidden |
 dotted |
 dashed |
 solid |
 double |
 groove |
 ridge |
 inset |
 outset

例

すべての境界線のスタイルのデモ

HTML

html

<table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table>

CSS

css

/* 表の外見を定義 */ table { border-width: 3px; background-color: #52e385; } tr, td { padding: 3px; } /* border-bottom-style の例のクラス */ .b1 { border-bottom-style: none; } .b2 { border-bottom-style: hidden; } .b3 { border-bottom-style: dotted; } .b4 { border-bottom-style: dashed; } .b5 { border-bottom-style: solid; } .b6 { border-bottom-style: double; } .b7 { border-bottom-style: groove; } .b8 { border-bottom-style: ridge; } .b9 { border-bottom-style: inset; } .b10 { border-bottom-style: outset; }

結果

仕様書

Specification
CSS Backgrounds and Borders Module Level 3 # border-style

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨1970年1月1日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content