border-style: ***; border-***-style: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

border-style と border-***-style は、境界線のスタイルを指定するプロパティです。

  • border-style … 上下左右の境界線のスタイルを一括で指定
  • border-***-style … 上下左右の境界線のスタイルを個別に指定 （*** の部分には、top、right、bottom、left が入ります）

上記のように、上下左右をまとめて指定する方法と、それぞれを個別に指定する方法があります。


div.example1 {
border-width: thick;
border-color: #ff0000;
border-style: solid;
}

div.example2 {
border-width: medium;
border-color: #ff0000;
border-top-style: solid;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: dashed;
}

境界線のスタイル

境界線のスタイルは、以下の値で指定します。

none （線なし） （初期値）

solid （実線）

double （二重の線）

groove （谷型の線）

ridge （山型の線）

inset （凹型の線）

outset （凸型の線）

dotted （点線）

dashed （破線）

border-style … 上下左右を一括で指定

プロパティ名 値 説明
border-style 境界線のスタイル 上下左右の境界線のスタイルを指定

次のように、4タイプの指定方法があります。それぞれの値は、半角スペースで区切って記述します。

  • border-style: solid; … ［上下左右］ を指定
  • border-style: dashed double; … ［上下］ と ［左右］ を指定
  • border-style: dashed double dotted; … ［上］ と ［左右］ と ［下］ を指定
  • border-style: solid dashed double dotted; … ［上］ と ［右］ と ［下］ と ［左］ を指定

border-***-style … 上下左右を個別に指定

プロパティ名 値 説明
border-top-style 境界線のスタイル 上の境界線のスタイルを指定
border-right-style 境界線のスタイル 右の境界線のスタイルを指定
border-bottom-style 境界線のスタイル 下の境界線のスタイルを指定
border-left-style 境界線のスタイル 左の境界線のスタイルを指定

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

h1, h2, span {
border-width: medium;
border-color: #000000;
}

h1 {
border-style: dotted;
}

h2 {
border-top-style: dotted;
border-right-style: double;
border-bottom-style: dashed;
border-left-style: groove;
}

span {
border-style: dotted none;
}

</style>

</head>
<body>

<h1>点線タイプの境界線</h1>

<h2>上下左右に異なるスタイルを指定</h2>

<p>上下の<span>境界線</span>のみ表示します。</p>

</body>
</html>
表示例

点線タイプの境界線

上下左右に異なるスタイルを指定

上下の境界線のみ表示します。