border-color プロパティ ボーダーの色を指定
プロパティの値 | 適用される箇所 |
border-color: A; | A:上下左右 |
border-color: A B; | A:上下 B:左右 |
border-color: A B C; | A:上 B:左右 C:下 |
border-color: A B C D; | A:上 B:右 C:下 D:左 |
ボーダーの色を個別に指定する。
border-top-color, border-bottom-color, border-right-color, border-left-color プロパティを使い、指定する。
border-width プロパティ ボーダーの太さを指定する。
プロパティの値 | 適用される箇所 |
border-width: A; | A:上下左右 |
border-width: A B; | A:上下 B:左右 |
border-width: A B C; | A:上 B:左右 C:下 |
border-width: A B C D; | A:上 B:右 C:下 D:左 |
指定可能な値
・実数+単位
・thin, medium, thick
thin:細いボーダー medium:中程度のボーダー thick:太いボーダー
ボーダーの太さを個別に指定する。
プロパティ、border-top-width, border-bottom-width, border-right-width, border-left-width を使う。
border-style プロパティ ボーダーの線種を指定する。
プロパティ | 適用される箇所 |
border-style: A; | A:上下左右 |
border-style: A B; | A:上下 B:左右 |
border-style: A B C; | A:上 B:左右 C:下 |
border-style: A B C D; | A:上 B:右 C:下 D:左 |
指定可能な値
none, solid, double, dotted, dashed など。
none | 非表示にする。 |
solid | 実線。 |
double | 二重線。 |
dotted | 点線。 |
dashed | 破線。 |
ボーダーの線種を個別に指定する。
プロパティ、border-top-style, border-bottom-style, border-right-style, border-left-style を使う。
border プロパティ ボーダーの色、太さ、線種をまとめて指定する。
border プロパティを使い、ボーダーの色、太さ、線種をまとめて指定することができる。
値
色、太さ、線種の値を、半角スペースで区切って指定する。
指定する順番は、自由。
ボーダーの色、太さ、線種をまとめて、ボーダーの上下左右、個別に指定する。
border-top, border-bottom, border-right, border-left を使う。
ボーダーを角丸にする。
border-radius プロパティで指定する。
初期値は、0 で角丸の半径は、0になり、四角形となる。
値を大きくすれば、角丸の半径も大きくなる。
この記事を読んだ人はこんな記事にもご興味があるかも
(Visited 85 times, 1 visits today)