menu
menu

キーワード検索

 

最近の投稿

border-width【CSSリファレンス】

  • CSS

border-width

こんにちは(・∀・)

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: 10px; 上
border-right-width: thin; 右
border-bottom-width: medium; 下
border-left-width: thick; 左

初期値

medium

サンプルデモ
HTML

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

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

サンプルデモ

関連リンク

CSSリファレンス

  • カテゴリー:CSS