■概要
border属性は、タグの枠を指定するもので、background属性と似たように詳細な属性を同時に使うことができます。
width – style – colorの順で指定します。
border-width
枠の太さで、主にpx段位で書きます。
border-style
枠のスタイルで、実線、点線、二重線などのオプションがあります。
border-color
枠の色で、値はcolor属性のフォーマットを使用します。
■例
<style>
.border-styles > p{
margin: 4px 0;
padding: 1px 3px;
border-width: 2px;
border-color: #aaa;
}
</style>
<div class=”border-styles”>
<p style=”border-style: solid”>solid</p>
<p style=”border-style: dotted”>dotted</p>
<p style=”border-style: dashed”>dashed</p>
<p style=”border-style: double”>double</p>
<p style=”border-style: groove”>groove</p>
<p style=”border-style: ridge”>ridge</p>
<p style=”border-style: inset”>inset</p>
<p style=”border-style: outset”>outset</p>
</div>
出力結果
soliddotteddasheddoublegrooveridgeinsetoutset
■方向
枠の特定の面のみ指定することもできます。
border-bottom-colorのように方向、太さ、スタイルを指定することもできます。
■使用方法
#box {
border: 5px dotted green;
border-bottom: 6px solid blue;
}
■例
<html>
<head>
<style>
#box{
padding: 7px;
border: 5px dotted green;
border-bottom: 5px solid blue;
}
</style>
</head>
<body>
<div id=”box”>Border Example</div>
</body>
</html>
出力結果
Border Example
