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になり、四角形となる。
値を大きくすれば、角丸の半径も大きくなる。
この記事を読んだ人はこんな記事にもご興味があるかも
- 2014-07-23 WordPressオリジナル・テーマ作成、制作へのアプローチ
![[-コーディング-]-ナビゲーション（グローバルメニュー）の作成法](https://i0.wp.com/webdesign.ki-blog.biz/files/%E3%82%B3%E3%83%BC%E3%83%86%E3%82%99%E3%82%A3%E3%83%B3%E3%82%AF%E3%82%99-%E3%83%8A%E3%83%92%E3%82%99%E3%82%B1%E3%82%99%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%EF%BC%88%E3%82%AF%E3%82%99%E3%83%AD%E3%83%BC%E3%83%8F%E3%82%99%E3%83%AB%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%EF%BC%89%E3%81%AE%E4%BD%9C%E6%88%90%E6%B3%95-2.png?resize=150%2C150)
2020-03-19 [ コーディング ] ナビゲーション（グローバルナビゲーション）の作成法
2018-04-02 [ CSS ] 3カラム・レイアウト、コーディング clearfix![[ タイポグラフィー ] 覚えておきたい定番明朝体フォント](https://i0.wp.com/webdesign.ki-blog.biz/files/%E3%82%BF%E3%82%A4%E3%83%9B%E3%82%9A%E3%82%AF%E3%82%99%E3%83%A9%E3%83%95%E3%82%A3%E3%83%BC-%E8%A6%9A%E3%81%88%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E5%AE%9A%E7%95%AA%E6%98%8E%E6%9C%9D%E4%BD%93%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88.png?resize=150%2C150)
2020-06-30 [ タイポグラフィー ] 覚えておきたい定番明朝体フォント
2016-10-01 絶対パスと相対パス
2019-01-29 [ CSS ] ナビゲーション固定し、スクロールしても動かないヘッダーを作成する方法
(Visited 123 times, 1 visits today)