border

borderとよく似た属性にoutlineがありますが、それは領域を占有しないためコンテンツの領域に影響しません。

border-style

solid
 
double
 
groove
 
ridge
 
inset
 
outset
 
dashed
 
dotted
 

border-width

thin
medium
thick

border-color

red
black

colorとの関係

border-colorの指定を省略して、colorの影響を確かめます。

適用例
未指定
<div>A
    <div style="border-bottom: medium solid">B</div>
</div>
A
B
当該要素にcolorを指定
<div>A
    <div style="color: red; border-bottom: medium solid">B</div>
</div>
A
B
親要素にcolorを指定
<div style="color: red">A
    <div style="border-bottom: medium solid">B</div>
</div>
A
B

CSS borderプロパティの使用には注意が必要」ではOpera 6で問題が発生するとの報告がありますが、Opera 12では問題を確認できませんでした。

border

  • border-width
  • border-style
  • border-color

の3つの属性を一括して指定できます。

border: 1px solid black;

省略した部分は初期値に設定されます。

border-radius

5px

適用場所ごとの属性名
  (left) (right)
(top) border-top-left-radius border-top-right-radius
(bottom) border-bottom-left-radius border-bottom-right-radius
HTMLの情報サイトから、まとめて検索