borderとよく似た属性にoutlineがありますが、それは領域を占有しないためコンテンツの領域に影響しません。
| solid | |
|---|---|
| double | |
| groove | |
| ridge | |
| inset | |
| outset | |
| dashed | |
| dotted |
| thin | |
|---|---|
| medium | |
| thick |
| red | |
|---|---|
| black |
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では問題を確認できませんでした。
の3つの属性を一括して指定できます。
border: 1px solid black;
省略した部分は初期値に設定されます。
5px
| 左 (left) | 右 (right) | |
|---|---|---|
| 上 (top) | border-top-left-radius | border-top-right-radius |
| 下 (bottom) | border-bottom-left-radius | border-bottom-right-radius |