CSS border

HTML&CSS

borderプロパティ

borderの一括指定は、color、width、styleの3つを順不同でブランク区切りで指定します

borderでは4辺を同時に指定することになります

border: 10px solid #000;

各値を個別に指定する場合は以下の通りです

border-widht: 10px;
border-style: solid;
border-color: #000;

のように別々に指定も可能です

その場合は4辺を異なる値で指定できます

指定は値をブランク区切りで指定します

値が1つの場合は、4辺同じ値になる

値が2つの場合は、上下、左右

値が3つの場合  上、左右 下

値が4ツの場合  上、右、下、左(時計回り)

4辺を個別に指定

borderプロパティの各辺を個別に指定する場合は以下プロパティを使用します

border-top    上
border-bottom  下
border-left    左
border-right   右

各々のプロパティにはさらにborderプロパティと同じようにcolor、width、styleの3つを順不同でブランク区切りで指定します

border-top:10px solid #000;
border-bottom: 10px solid #000;
border-left:10px solid #000;
border-right: 10px solid #000;

さらに各々のプロパティ値3つを別々に指定することもできます

border-top-width

border-top-style

border-top-color

これは。bottom、left、rightに対しても同じです

borderプロパティの指定をしていない値については、初期値が採用されます

width の初期値 medium

style の初期値 none

color の初期値 colorプロパティに現在設定されている色またはcolorプロパティの初期値


styleの種類(10px グレーで作成しました)

dashed

dotted

double

groove

inset

outset

ridge

solid

コメント