枠線の作成

枠線の作成方法についての説明です。

「border: 太さ 種類 色」で枠線を作成できます。枠線の種類は、none, solid, double, dashed, dotted, groove, ridge, inset, outset の中から選べます。

《例》

.box {
border: 5px soild skyblue
}

《表示結果》

none

solid

double

dashed

dotted

groove

ridge

inset

outset

widthで幅、heightで高さを指定できます。

《例》

.text {
border: 5px solid skyblue;
width: 100px;
height: 50px
}

《表示結果》

「border-radius: 数値」で、指定した値の分を半径として枠線の角を丸くすることができます。

《例》

.box {
width: 100px;
height: 50px;
border: 5px outset skyblue;
border-radius: 10px
}

《表示結果》

>>CSS講座メニューへ戻る