CSS border属性

border

border-width、border-style、border-color をまとめて指定
left/right/top/bottomを個別に設定可能。

<div id="box1">box</div>
<style>
　#box1 {
　　width: 100px;
　　height: 100px;
　　border:1px solid #888;
　}
</style>

border-style

設定数の違いによる上下左右の設定方法に従う
組込み値を指定。

値	機能	例
指定無し	none扱い
none(規定)	非表示
hidden	非表示
solid	1本線
double	2本線
groove	立体的に窪んだ線
ridge	立体的に隆起した線
inset	上と左が暗く下と右が明るい線
outset	上と左が明るく下と右が暗い線
dashed	破線
dotted	点線

border-color

設定数の違いによる上下左右の設定方法に従う
組込み値/16新数値で指定
border-color: red;
border-color: #ff0000;

border-width

設定数の違いによる上下左右の設定方法に従う
組込み値/数値で指定
border-width: thin;
border-width: 16px;
thin(細い)
medium(普通)
thick(太い)

border-radius

<div id="box2">box</div>
<style>
　#box2 {
　　width: 100px;
　　height: 100px;
　　margin:10px;
　　padding:6px 10px;
　　border:1px solid #888;
　　border-radius:5px;
　}
</style>

border-collapse

tableにおける線間隔
border-collapse: collapse;間隔なし
border-collapse: separate;間隔あり(規定)

margin、padding

<div id="box3">box</div>
<style>
　#box3 {
　　width: 100px;
　　height: 100px;
　　margin:10px;
　　padding:6px 10px;
　　border:1px solid #888;
　}
</style>

box-shadow

<div id="box4">box</div>
<style>
　#box4 {
　　width: 100px;
　　height: 100px;
　　margin:10px;
　　padding:6px 10px;
　　border:1px solid #888;
　　border-radius:5px;
　　box-shadow: 0 0 5px #ccc;
　　box-shadow: 0 0 10px #ccc;
　}
</style>