領域枠に関するCSS
■枠の形状

■例{border-style:solid}

■例{border-style:double}

■例{border-style:groove}

■例{border-style:ridge}

■例{border-style:inset}

■例{border-style:outset}

■例{border-style:hidden}

■例{border-style:dashed}

■例{border-style:dotted}

■CSS
タグ{border-style:キーワード}
■HTML
<タグ style="border-style:キーワード">〜</タグ>
■キーワード
キーワード 枠の形状
none なし
hidden なし
solid 実線
double 二重線
groove へこんだ感じの立体枠
ridge とがった感じの立体枠
inset 内容が沈んだ感じになる立体枠
outset 内容が浮き出した感じになる立体枠
dashed 四角い点線
dotted 丸い点線
■枠の色

■例{border-style:double}

■例{border-style:groove}

■例{border-style:outset}

■例{border-style:dashed}

■CSS
タグ{border-style:キーワード;
border-color:枠の色}
■HTML
<タグ style="border-style:キーワード;
border-color:枠の色">〜</タグ>
■枠の太さ

■例{border-width:1}

■例{border-width:thin}

■例{border-width:medium}

■例{border-width:thick}

■例{border-width:20px}

■CSS
タグ{border-style:キーワード;
border-width:枠の太さ}
■HTML
<タグ style="border-style:キーワード;
border-width:枠の太さ">〜</タグ>

■関連項目
■枠の太さ、色、形状をまとめて指定する
■CSS
タグ{border:太さ 色 形状}
■HTML
<タグ style="border:太さ 色 形状">〜</タグ>

■領域と文字列との間の余白

■例{margin:10}

■例{margin:10 30}

■例{margin:0 10 20 30}

■CSS
タグ{margin:余白}
■HTML
<タグ style="margin:余白">〜</タグ>
■枠と文字列との間の余白

■例{padding:10}

■例{padding:10 30}

■例{padding:0 10 20 30}

■CSS
タグ{padding:余白}
■HTML
<タグ style="padding:余白">〜</タグ>
Presented by
HTML辞典