CSS - border-width

概要

属性名	border-width
値	[ <length> \| thin \| mediun \| thick ]{1,4}
初期値	medium
適用可能要素	すべて
継承	継承しない
メディア	visual
アニメーション	可能

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS1	4	1	1	3.5	1

説明

ボーダーラインの太さを指定します。

値	説明
<length>	線の太さを指定します。詳細は <length> を参照してください。
thin	細い線にします。
medium	中程度の線にします。
thick	太い線にします。

値を 4つ指定した場合、それぞれは、上、右、下、左に適用されます。左を省略すると右と同じ値になります。下を省略すると上の同じ値になります。右を省略すると上と同じ値になります。

CSS

border-width: 1px;              /* 上:1px、右:1px、下:1px、左:1px */
border-width: 1px 2px;	        /* 上:1px、右:2px、下:1px、左:2px */
border-width: 1px 2px 3px;      /* 上:1px、右:2px、下:3px、左:2px */
border-width: 1px 2px 3px 4px;	/* 上:1px、右:2px、下:3px、左:4px */

使用例

CSS

.sample {
    border-width: 3px;
    border-color: red;
    border-style: solid;
    height: 32px;
    width: 120px;
    margin: 1em;
}

HTML

<div class="sample"></div>

表示

リンク

初版：1997年7月27日、最終更新：2016年1月3日

https://www.tohoho-web.com/css/prop/border-width.htm

CSS - border-width

概要

サポート (説明)

説明

使用例

関連項目

リンク