スタイルシートリファレンス > border-width

スタイルシートリファレンス border-width


border-width ボーダー上下左右の太さを指定する (IE4/N4)

ボーダー上下左右の太さをまとめて指定します。

thin 細線

medium 普通:規定値

thick 太線

数値で指定 1pxなどの単位で指定

px 画像を構成する最小単位 (モニタの解像度により変化)

1px

border-width:1px;(上下左右1px)

border-width:1px 2px;(上下1px 左右2px)

border-width:1px 2px 3px;(上1px 左右2px 下3px)

border-width:1px 2px 3px 4px;(上1px 右2px 下3px 左4px)

▲ページ先頭へ

使用例 border-width

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
.smp1 {
border-color: #0000ff;
border-style: solid;
border-width: 1px;
}
.smp2 {
border-color: #0000ff;
border-style: solid;
border-width: 1px 3px;
}
.smp3 {
border-color: #0000ff;
border-style: solid;
border-width: 1px 3px 5px;
}
.smp4 {
border-color: #0000ff;
border-style: solid;
border-width: 1px 3px 5px 8px;
}
-->
</style>
</head>
<body>
<table class="smp1">
<tr>
<td>ボーダー 上下左右1px</td>
</tr>
</table>
<br>
<table class="smp2">
<tr>
<td>ボーダー 上下1px 左右3px</td>
</tr>
</table>
<br>
<table class="smp3">
<tr>
<td>ボーダー 上1px 左右3px 下5px</td>
</tr>
</table>
<br>
<table class="smp4">
<tr>
<td>ボーダー 上1px 右3px 下5px 左8px</td>
</tr>
</table>
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示


ボーダー 上下左右1px

ボーダー 上下1px 左右3px

ボーダー 上1px 左右3px 下5px

ボーダー 上1px 右3px 下5px 左8px

▲ページ先頭へ

関連項目【ボーダー】

border
ボーダー上下左右のスタイル・太さ・色を指定する
border-top
ボーダー上のスタイル・太さ・色を指定する
border-bottom
ボーダー下のスタイル・太さ・色を指定する
border-right
ボーダー右のスタイル・太さ・色を指定する
border-left
ボーダー左のスタイル・太さ・色を指定する
border-width
ボーダー上下左右の太さを指定する
border-top-width
ボーダー上の太さを指定する
border-bottom-width
ボーダー下の太さを指定する
border-right-width
ボーダー右の太さを指定する
border-left-width
ボーダー左の太さを指定する
border-style
ボーダー上下左右のスタイルを指定する
border-top-style
ボーダー上のスタイルを指定する
border-bottom-style
ボーダー下のスタイルを指定する
border-right-style
ボーダー右のスタイルを指定する
border-left-style
ボーダー左のスタイルを指定する
border-color
ボーダー上下左右の色を指定する
border-top-color
ボーダー上の色を指定する
border-bottom-color
ボーダー下の色を指定する
border-right-color
ボーダー右の色を指定する
border-left-color
ボーダー左の色を指定する

▲ページ先頭へ

スタイルシートリファレンス > border-width