| プロパティ | 解説 |
| border-top | 上ボーダーのスタイル・太さ・色を指定できます。 |
| border-bottom | 下ボーダーのスタイル・太さ・色を指定できます。 |
| border-left | 左ボーダーのスタイル・太さ・色を指定できます。 |
| border-right | 右ボーダーのスタイル・太さ・色を指定できます。 |
| border-style | ボーダーのスタイル指定できます。 |
| border-width | 右ボーダーの太さを指定できます。 |
| border-color | 右ボーダーの色を指定できます。 |
| border-radius | ボックスの４つのコーナーを角丸に変わりにます。詳しくはこちら |
| プロパティ | 表示 |
| 1px |
border:1px solid #626262;
|
| 3px |
border:3px solid #626262;
|
| 5px |
border:5px solid #626262;
|
| 0.5em |
border:0.5em solid #626262;
|
| 1em |
border:1em solid #626262;
|
| プロパティ | 表示 |
| none | ボーダーは表示しない |
| hidden | ボーダーは表示しない |
| solid |
border:5px solid #626262;
|
| double |
border:5px double #626262;
|
| groove |
border:5px groove #626262;
|
| ridge |
border:5px ridge #626262;
|
| inset |
border:5px inset #626262;
|
| outset |
border:5px outset #626262;
|
| dashed |
border:5px dashed #626262;
|
| dotted |
border:5pxdotted #626262;
|
| 值 | 表示 |
| #222222 |
border:5px solid #222222;
|
| #bf0000 |
border:5px solid #bf0000;
|
| orange |
border:5px solid orange;
|
| yellow |
border:5px solid yellow;
|
| 值 | 表示 |
| ５px |
border-radius:5px;
|
| 10px |
border-radius:10px;
|
| 10% |
border-radius:10%;
|
| 20% |
border-radius:20%;
|
| 1em |
border-radius:1em;
|
| 2em |
border-radius:2em;
|
| 值 | 表示 |
| 10px 10px 10px 10px |
border-radius:10px;
|
| 10px 20px 30px 40px |
border-radius:10px 20px 30px 40px;
|
|
注意 以上の数字設定順番は左上・右上・右下・左下の順で指定します。 |
|
| プロパティ | 解説 |
| border-top-left-radius | 左上角丸個別に指定 |
| border-top-right-radius | 右上角丸個別に指定 |
| border-bottom-left-radius | 左下角丸個別に指定 |
| border-bottom-right-radius | 右下角丸個別に指定 |
| 上表のプロパティは角丸個別に指定することができます | |