概要

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

.sample {
  border-color: blue;
}

適用要素

すべての要素

指定できる値

色

カラーコード等

transparent

透明で表示

指定方法

border-color:#ccc;

上下左右

border-color:#ccc #555;

上下 左右

border-color:#ccc #666 #333;

上 左右 下

border-color:#ccc #777 #333 #000;

上 右 下 左

個別に指定

border-top-color:

上

border-right-color:

右

border-bottom-color:

下

border-left-color:

左

初期値

transparent

サンプル

HTML

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

CSS

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

Result

関連リンク

CSSリファレンス