境界線

「border-top」プロパティ

「border-top」プロパティは、上部のボーダー(境界線)の太さ・スタイル・色を指定するCSSプロパティです。

「border-top」プロパティの値

上部のボーダー(境界線)の太さ・スタイル・色を指定する値は「境界線の太さ」「境界線のスタイル」「境界線の色」などの値を指定することができます。
上部のボーダー(境界線)の太さを指定する値は「px」「em」などの値を指定、ボーダー(境界線)のスタイルを指定する値は「none」「hidden」「solid」「double」「groove」などの値を指定、ボーダー(境界線)の色を指定する値は「カラー名」「16進数カラーコード」「RGB」「HSL」などの値を指定することができます。 また、「border-top」プロパティと同時に設定が出来るプロパティの種類がいくつかあります。

【プロパティの種類】
・border-width
・border-color
・border-style

「border-top」プロパティの指定方法

上部のボーダー(境界線)の太さ・スタイル・色を指定する場合は、「border-top」プロパティを使い適応する値を指定することで実装できます。

「border-top」プロパティ
セレクタ{
border-top:上部のボーダー(境界線)の太さ・スタイル・色;
}
値例(太さ)
/* px値 */
border-top: 1px #ff0000 solid;
border-top: 5px #ff0000 solid;
border-top: 10px #ff0000 solid;

/* em値 */
border-top: 1em #ff0000 solid;
border-top: 5em #ff0000 solid;
border-top: 10em #ff0000 solid;
値例(スタイル)
/* 基本値 */
border-top: none;/* 初期値 */
border-top: 1px #ff0000 hidden;/* ボーダーは表示されず、太さも0表示 */
border-top: 1px #ff0000 solid;/* 1本線で表示 */
border-top: 1px #ff0000 double;/* 2本線で表示 */
border-top: 1px #ff0000 groove;/* 立体的に窪んだ線で表示 */
border-top: 1px #ff0000 ridge;/* 立体的に隆起した線で表示 */
border-top: 1px #ff0000 inset;/* 上と左のボーダーが暗く、下と右のボーダーが明るく表示 */
border-top: 1px #ff0000 outset;/* 上と左のボーダーが明るく、下と右のボーダーが暗く表示 */
border-top: 1px #ff0000 dashed;/* 破線表示 */
border-top: 1px #ff0000 dotted;/* 点線表示 */
値例(色)
/* カラー名値 */
border-top: 1px red solid;/* 赤 */
border-top: 1px orange solid;/* オレンジ */
border-top: 1px black solid;/* 黒 */

/* 16進数カラー値 */
border-top: 1px #FF0000 solid;/* 赤 */
border-top: 1px #ff7200 solid;/* オレンジ */
border-top: 1px #000000 solid;/* 黒 */

/* rgb値 */
border-top: 1px rgb(34, 12, 64) solid;/* 赤 */
border-top: 1px rgb(255, 114, 64) solid;/* オレンジ */
border-top: 1px rgb(0, 0, 0) solid;/* 黒 */

/* hsl値 */
border-top: 1px hsl(30, 100%, 50%) solid;/* 赤 */
border-top: 1px hsl(30, 100%, 50%) solid;/* オレンジ */
border-top: 1px hsl(0, 0%, 0%) solid;/* 黒 */
値例(基本)
/* 基本値 */
border-top: 1px solid red;
border-top: 2px double #000000;
border-top: 5px dashed rgb(255, 114, 64);
表示例
ボーダー(境界線)(1px solid red)
ボーダー(境界線)(2px double #000000)
ボーダー(境界線)(5px dashed rgb(255, 114, 64))