枠線の形を変える
上下左右の枠線の形を変えることができます。
<style
type="text/css">
.di {border-color: #FF0000; border-width: 10px;
border-style: solid inset outset none}
</style>
<div
class="di">文字文字文字文字</div>
文字文字文字文字
border-left-style：
左側の枠線を変えます。
border-right-style：
右側の枠線を変えます。
border-top-style：
上側の枠線を変えます。
border-bottom-style：
下側の枠線を変えます。
border-style:
*：
上下左右の枠線を変えます。
border-style: *
?：
*は上下の枠線を変えます。
?は左右の枠線を変えます。
border-style: * ?
#：
*は上の枠線を変えます。
?は左右の枠線を変えます。
#は下の枠線を変えます。
border-style: * ? #
%：
*は上の枠線を変えます。
?は右の枠線を変えます。
#は下の枠線を変えます。
%は左の枠線を変えます。
[1]枠線の形の値
none
枠線は表示されず、太さも0になります。
表のセルなどの枠線が重なり合う場合は他の値が優先されます。
hidden
枠線は表示されず、太さも0になります。
表のセルなどの枠線が重なり合う場合はこの値が優先されます。
solid
1本線で表示されます。
double
2本線で表示されます。
groove
立体的に窪んだ線で表示されます。
ridge
立体的に隆起した線で表示されます。
inset
上と左の枠線が暗く、下と右の枠線が明るく表示され、枠線で囲まれた領域全体が立体的にくぼんだように表示されます。
上下左右の一部だけに指定しても立体感は出ません。
outset
上と左の枠線が明るく、下と右の枠線が暗く表示され、枠線で囲まれた領域全体が立体的に隆起したように表示されます。
上下左右の一部だけに指定しても立体感は出ません。
dashed
破線で表示されます。
dotted
点線で表示されます。
[MENUに戻る]
[HOME]