CSS・HTML　Factory

HOME>ボーダー１>ボーダー２

いろいろなボーダー

ボーダー立体的に隆起した線

border-style:ridge;

ＨＴＭＬ

<p class="border">border-style:ridge;</p>

ＣＳＳ

p.border { border-width: 5px; border-color: #CC6600; border-style: ridge; background-color: #FFFFFF; }

ボーダー上と左が暗く、下と右が明るい立体的な線

border-style:inset;

ＨＴＭＬ

<p class="border">border-style:inset;</p>

ＣＳＳ

p.border { border-width: 5px; border-color: #CC6600; border-style: inset; background-color: #FFFFFF; }

ボーダー上と左が明るく、下と右が暗い立体的な線

border-style:outset;

ＨＴＭＬ

<p class="border">border-style:outset;</p>

ＣＳＳ

p.border { border-width: 5px; border-color: #CC6600; border-style: outset; background-color: #FFFFFF; }

CSS・Factoy