CSS border属性

border

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

box

<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

box

<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

box

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

box-shadow

box

<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>

コメントを残す

メールアドレスが公開されることはありません。