お知らせ / ブログINFO / BLOG
2019.11.07
【CSS】borderの線種別紹介
使用する頻度の高いborder
ですが、普段使用する線種は限られていると思います。
普段使用しない線種を使用する際の備忘録も兼ねて掲載致します。
実線(solid)
実線(solid)
.solid {
border:4px solid #4fa0ca;
}
最もオーソドックスで一番使用頻度が高い線です。
点線(dotted)
点線(dotted)
.dotted {
border:4px dotted #4fa0ca;
}
この点線も使用頻度は高いですね。太さを1px~4pxぐらいで使用する事が多いと思います。
破線(dashed)
破線(dashed)
.dashed {
border:4px dashed #4fa0ca;
}
破線の太さは小さい目で設定するのでスマートです。
二重線(double)
二重線(double)
.double {
border:4px double #4fa0ca;
}
線の太さを指定しない場合は大丈夫なのですが、太さを指定するとブラウザ間で表示の差があります。
癖があり、統一も難しいので二重線を設定したい場合は、ブロックを入れ子にして各ブロックに設定する方がよさそうです。
谷型(groove)
谷型(groove)
.groove {
border:4px groove #4fa0ca;
}
凹んだように見える線を表示します。ridge
の逆となります。
山型(ridge)
山型(ridge)
.ridge {
border:4px ridge #4fa0ca;
}
出っ張ったように見える境界線を表示します。groove
の逆となります。
立体型(inset)
立体型(inset)
.inset {
border:4px inset #4fa0ca;
}
上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。
立体型(inset)
立体型(outset)
.outset {
border:4px outset #4fa0ca;
}
上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。
これらの線種を使用し、上下左右別々の線種の設定も可能です。