border style全10種類まとめ [超初心者向け]

CSS

こんにちは! 本記事では、CSSのborder styleの全10種類を、簡単にまとめています。

ぜひ参考にしてみてください。

border style全10種類

border style solid

■書き方:

■サンプルコード

・HTMLファイル(index.html)

・CSSファイル(main.css)


・[超初心者向け] border styleをsolidにする~他のsytleとの比較も

border style double

■書き方:

■サンプルコード

・HTMLファイルは、上のsolidのものと同じ。

・CSSファイル(main.css)

・border styleをdoubleにする[CSS: 初心者向け]

border style groove

■書き方:

■サンプルコード

・HTMLファイルは、上のsolidのものと同じ。

・CSSファイル(main.css)

・border styleをgrooveにする [初心者向けCSS]

border style ridge

■書き方:

■サンプルコード

・HTMLファイルは、上のsolidのものと同じ。

・CSSファイル(main.css)

・border styleをridgeにしてみる

border style inset

■書き方:

・HTMLファイルは、上のsolidのものと同じ。

・CSSファイル(main.css)

・[超初心者向け] border styleをinsetにする

border style outset

■書き方:

・HTMLファイルは、上のsolidのものと同じ。

・CSSファイル(main.css)

・[超初心者向け] border styleをoutsetにしてみる

border style dashed

■書き方:

・HTMLファイルは、上のsolidのものと同じ。

・CSSファイル(main.css)

・[超初心者向け] border styleをdashedにしてみる

border style dotted

■書き方:

・HTMLファイルは、上のsolidのものと同じ。

・CSSファイル(main.css)

・[超初心者向け] border styleをdottedにしてみる

border style none

■書き方:

・HTMLファイルは、上のsolidのものと同じ。

・CSSファイル(main.css)

・border styleをnoneで枠線を消す[初心者向け]

border style hidden

■書き方:

・HTMLファイルは、上のsolidのものと同じ。

・CSSファイル(main.css)

・[超初心者向け] border styleをhiddenにする

border styleについて参考になるサイト

border styleについて参考になるサイトを紹介します。

・border-style-スタイルシートリファレンス – HTMLクイックリファレンス

・CSS border-style property – W3Schools(英語サイト)

以上です! CSSのborder styleはたくさんあるので、使い分けていきましょう〜!