CSS辞典 borderプロパティ、border-topプロパティ、border-rightプロパティ、border-bottomプロパティ、border-leftプロパティの解説
ボーダーの幅、スタイル、色をまとめて指定する「borderプロパティ」、上辺をまとめて指定する「border-topプロパティ」、右辺をまとめて指定する「border-rightプロパティ」、下辺をまとめて指定する「border-bottomプロパティ」、左辺をまとめて指定する「border-leftプロパティ」の使用方法を記載
対応バージョン：CSS3／2.1
目次
対応ブラウザ
| 初期値 | style、width、colorプロパティに準じる |
| 適用される要素 | すべての要素 |
| モジュール | Backgrounds and Borders Module Level3 |
| 継承 | なし |
※border、border-top、border-right、border-left、border-bottomすべて同様。
borderプロパティ
概要・使用方法
{ border: 幅 スタイル 色;}borderプロパティは、ボーダーの各プロパティをまとめて指定できる。のtop、right、bottom、leftのプロパティと同様です。それぞれ半角スペースで区切って指定します。
幅の詳細
スタイルの詳細
色の詳細
border-topプロパティ
上辺のボーダーの幅、スタイル、色を指定できます。
概要・使用方法
{ border-top: 幅 スタイル 色;}border-rightプロパティ
右辺のボーダーの幅、スタイル、色を指定できます。
概要・使用方法
{ border-right: 幅 スタイル 色;}border-bottomプロパティ
下辺のボーダーの幅、スタイル、色を指定できます。
概要・使用方法
{ border-bottom: 幅 スタイル 色;}border-leftプロパティ
左辺のボーダーの幅、スタイル、色を指定できます。
概要・使用方法
{ border-left: 幅 スタイル 色;}サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>borderプロパティ CSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
.disp{display:inline-block;margin:0.5em;}
.box-style{
width: 20em;
height: 5em;
margin:0.5em;
background-color:lightsteelblue;
}
.style-top{
border-top:10px red dashed;
}
.style-right{
border-right:10px red dashed;
}
.style-bottom{
border-bottom:10px red dashed;
}
.style-left{
border-left:10px red dashed;
}
.style-border{
border:10px red dashed;
}
</style>
</head>
<body>
<div class="disp">
<div class="box-style style-top">top</div>
<div class="box-style style-right">right</div>
<div class="box-style style-bottom">bottom</div>
<div class="box-style style-left">left</div>
<div class="box-style style-border">border</div>
</div>
</body>
</html>top
right
bottom
left
border
chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
