Plain Experience – 面白い商品・サービスを紹介するブログです 
こんにちは！ 本記事では、CSSのborder styleの全10種類を、簡単にまとめています。
ぜひ参考にしてみてください。
目次
border style全10種類
border style solid
■書き方:
|
1 |
border-style: solid; |
■サンプルコード
・HTMLファイル(index.html)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="main.css"> /*main.cssファイルを読み込み*/ <title>Test</title> </head> <body> <button id="button">ボタン</button> /*ボタンを作る*/ </body> </html> |
・CSSファイル(main.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#button { border-style: solid; border-width: 1px; border-color: rgb(0, 196, 204); /*上の3行をまとめて書くこともできます border: solid 1px rgb(0, 196, 204); */ /* 以下その他の設定 コピペしてください*/ align-items: center; background-color: white; color: rgb(0, 196, 204); border-radius: 4px; font-family: Open Sans, sans-serif; font-size: 24px; font-weight: 400; } |
・[超初心者向け] border styleをsolidにする~他のsytleとの比較も
border style double
■書き方:
|
1 |
border-style: double; |
■サンプルコード
・HTMLファイルは、上のsolidのものと同じ。
・CSSファイル(main.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#button { border-style: solid; border-width: 10px; border-color: rgb(0, 196, 204); /*上の3行をまとめて書くこともできます border: double 10px rgb(0, 196, 204); */ /* 以下その他の設定 コピペしてください*/ align-items: center; background-color: white; color: rgb(0, 196, 204); border-radius: 4px; font-family: Open Sans, sans-serif; font-size: 24px; font-weight: 400; } |
・border styleをdoubleにする[CSS: 初心者向け]
border style groove
■書き方:
|
1 |
border-style: groove; |
■サンプルコード
・HTMLファイルは、上のsolidのものと同じ。
・CSSファイル(main.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#button { border-style: groove; /*変更部分*/ border-width: 10px; border-color: rgb(0, 196, 204); /*上の3行をまとめて書くこともできます border: groove 10px rgb(0, 196, 204); */ /* 以下その他の設定 コピペしてください*/ align-items: center; background-color: white; color: rgb(0, 196, 204); border-radius: 4px; font-family: Open Sans, sans-serif; font-size: 24px; font-weight: 400; } |
・border styleをgrooveにする [初心者向けCSS]
border style ridge
■書き方:
|
1 |
border-style: ridge; |
■サンプルコード
・HTMLファイルは、上のsolidのものと同じ。
・CSSファイル(main.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#button { border-style: ridge; /*変更部分*/ border-width: 10px; border-color: rgb(0, 196, 204); /*上の3行をまとめて書くこともできます border: ridge 10px rgb(0, 196, 204); */ /* 以下その他の設定 コピペしてください*/ align-items: center; background-color: white; color: rgb(0, 196, 204); border-radius: 4px; font-family: Open Sans, sans-serif; font-size: 24px; font-weight: 400; } |
border style inset
■書き方:
|
1 |
border-style: inset; |
・HTMLファイルは、上のsolidのものと同じ。
・CSSファイル(main.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#button { border-style: inset; /*変更部分*/ border-width: 10px; border-color: rgb(0, 196, 204); /*上の3行をまとめて書くこともできます border: inset 10px rgb(0, 196, 204); */ /* 以下その他の設定 コピペしてください*/ align-items: center; background-color: white; color: rgb(0, 196, 204); border-radius: 4px; font-family: Open Sans, sans-serif; font-size: 24px; font-weight: 400; } |
・[超初心者向け] border styleをinsetにする
border style outset
■書き方:
|
1 |
border-style: inset; |
・HTMLファイルは、上のsolidのものと同じ。
・CSSファイル(main.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#button { border-style: outset; /*変更部分*/ border-width: 10px; border-color: rgb(0, 196, 204); /*上の3行をまとめて書くこともできます border: outset 10px rgb(0, 196, 204); */ /* 以下その他の設定 コピペしてください*/ align-items: center; background-color: white; color: rgb(0, 196, 204); border-radius: 4px; font-family: Open Sans, sans-serif; font-size: 24px; font-weight: 400; } |
・[超初心者向け] border styleをoutsetにしてみる
border style dashed
■書き方:
|
1 |
border-style: dashed; |
・HTMLファイルは、上のsolidのものと同じ。
・CSSファイル(main.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#button { border-style: dashed; /*変更部分*/ border-width: 10px; border-color: rgb(0, 196, 204); /*上の3行をまとめて書くこともできます border: dashed 10px rgb(0, 196, 204); */ /* 以下その他の設定 コピペしてください*/ align-items: center; background-color: white; color: rgb(0, 196, 204); border-radius: 4px; font-family: Open Sans, sans-serif; font-size: 24px; font-weight: 400; } |
・[超初心者向け] border styleをdashedにしてみる
border style dotted
■書き方:
|
1 |
border-style: dotted; |
・HTMLファイルは、上のsolidのものと同じ。
・CSSファイル(main.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#button { border-style: dotted; /*変更部分*/ border-width: 10px; border-color: rgb(0, 196, 204); /*上の3行をまとめて書くこともできます border: dotted 10px rgb(0, 196, 204); */ /* 以下その他の設定 コピペしてください*/ align-items: center; background-color: white; color: rgb(0, 196, 204); border-radius: 4px; font-family: Open Sans, sans-serif; font-size: 24px; font-weight: 400; } |
・[超初心者向け] border styleをdottedにしてみる
border style none
■書き方:
|
1 |
border-style: none; |
・HTMLファイルは、上のsolidのものと同じ。
・CSSファイル(main.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#button { border-style: none; /*変更部分*/ border-width: 10px; border-color: rgb(0, 196, 204); /*上の3行をまとめて書くこともできます border: none 10px rgb(0, 196, 204); */ /* 以下その他の設定 コピペしてください*/ align-items: center; background-color: white; color: rgb(0, 196, 204); border-radius: 4px; font-family: Open Sans, sans-serif; font-size: 24px; font-weight: 400; } |
・border styleをnoneで枠線を消す[初心者向け]
■書き方:
|
1 |
border-style: hidden; |
・HTMLファイルは、上のsolidのものと同じ。
・CSSファイル(main.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#button { border-style: hidden; /*変更部分*/ border-width: 10px; border-color: rgb(0, 196, 204); /*上の3行をまとめて書くこともできます border: hidden 10px rgb(0, 196, 204); */ /* 以下その他の設定 コピペしてください*/ align-items: center; background-color: white; color: rgb(0, 196, 204); border-radius: 4px; font-family: Open Sans, sans-serif; font-size: 24px; font-weight: 400; } |
・[超初心者向け] border styleをhiddenにする
border styleについて参考になるサイト
border styleについて参考になるサイトを紹介します。
・border-style－スタイルシートリファレンス – HTMLクイックリファレンス
・CSS border-style property – W3Schools(英語サイト)
以上です！ CSSのborder styleはたくさんあるので、使い分けていきましょう〜！
