【css】要素の上側の線のスタイルを指定できるborder-top-styleプロパティを解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 cssで要素の上側の線のスタイルを指定できるborder-top-styleプロパティについて

  • border-top-styleプロパティとは
  • border-top-styleプロパティを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10

border-top-styleプロパティとは

border-top-styleプロパティとは、HTML要素の上側の線のスタイルを指定できるプロパティです。

border-top-styleプロパティで指定すると
cssのborder-top-styleプロパティを解説
というようにHTML要素の上側に引く線のスタイルを指定することができます。

書き方は

で指定します。

設定できる値は以下です。

説明 書き方
none 表示しない。
デフォルト値。
他の線と重なる場合、ほかの線が優先される。
hidden 表示しない。
他の線と重なる場合、hiddenが優先される。
dotted 点線が表示される。
dashed 破線が表示される。
solid 実線が表示される。
double 二重線が表示される。
groove くぼんだ線が表示される。
ridge もりあがった線が表示される。
inset 要素全体で立体的になるようくぼんだ線が表示される。
一部のみ指定だと、立体感はない。
outset 要素全体で立体的になるようもりあがった線が表示される。
一部のみ指定だと、立体感はない。

では、次の章で実際に使い動作を確認します。

border-top-styleプロパティサンプルの概要

border-top-styleプロパティサンプルでは、

  • HTML
  • css

の2ファイルを使います。

11個div要素を用意します。
10個のdiv要素のみborder-top-styleプロパティでそれぞれ異なる値をつけるよう指定して、指定しなかったdiv要素との表示の確認をします。
フォルダ構成は以下のようになっています。
cssのborder-top-styleプロパティを解説

HTMLサンプル

HTMLで外部のcssを読み込むやり方と、cssでclass属性でHTML要素を指定するクラスセレクターについてはこちらの記事をご参考ください。

cssサンプル

実行結果

作成したHTMLをブラウザで開きます。

cssのborder-top-styleプロパティを解説

指定した値でHTML要素の上側の線のスタイルを指定できていることが確認できました。

まとめ:border-top-styleプロパティを使ってみよう

以上がcssのborder-top-styleプロパティについての解説でした!

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました