こんにちは（・∀・）

CSSプロパティのご紹介です。今回ご紹介するCSSプロパティはborder-widthです。

概要

border-widthプロパティを使用してボーダーの幅を指定します。

.sample {
  border-width: 2px;
}

適用要素

すべての要素

指定できる値

数値

数値+単位で設定

thin

細い線

medium

中くらいの線

thick

太い線

指定方法

border-width:10px;

上下左右

border-width:10px 20px;

上下 左右

border-width:10px 20px 10px;

上 左右 下

border-width:10px 20px 10px 20px;

上 右 下 左

個別に指定

border-top-width:

上

border-right-width:

右

border-bottom-width:

下

border-left-width:

左

初期値

medium

サンプル

HTML

<p class="demo">サンプルデモ</p>

CSS

.demo {
  border-width: 2px;
  border-color: #d49fc2;
  border-style: solid;
}

Result