MENU
  1. ホーム
  2. CSS
  3. border-style

border-style

CSS
2023.12.24
記事の内容

border-styleプロパティ

border-styleは、要素のボーダーのスタイル（線の形状）を指定するために使用されます。

border-styleの説明図
border-styleプロパティ
記法

.クラス名　{
　border-style: 上辺　右辺　下辺　左辺;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>border-styleプロパティに関して</title>
  </head>

  <body>
    <div class="boder-style-val1">ボーダースタイル設定値1つ</div>
    <div class="boder-style-val2">ボーダースタイル設定値2つ</div>
    <div class="boder-style-val3">ボーダースタイル設定値3つ</div>
    <div class="boder-style-val4">ボーダースタイル設定値4つ</div>
  </body>
</html>
div {
  margin: 5px;
}
.boder-style-val1 {
  border-style: solid;
  border-width: 5px;
}
.boder-style-val2 {
  border-style: solid dotted;
  border-width: 5px;
}
.boder-style-val3 {
  border-style: solid dotted dashed;
  border-width: 5px;
}
.boder-style-val4 {
  border-style: solid dotted dashed double;
  border-width: 5px;
}
出力結果
ボーダースタイル設定値1つ
ボーダースタイル設定値2つ
ボーダースタイル設定値3つ
ボーダースタイル設定値4つ

ボーダースタイルを個別指定

border-top-style：上辺指定
border-right-style：右辺指定
border-bottom-style：下辺指定
border-left-style：左辺指定

border-styleプロパティ(位置指定)
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>border-styleプロパティ(位置指定)に関して</title>
  </head>

  <body>
    <div class="boder-top-style">上辺指定</div>
    <div class="boder-right-style">右辺指定</div>
    <div class="boder-bottom-style">下辺指定</div>
    <div class="boder-left-style">左辺指定</div>
  </body>
</html>
div {
  margin: 5px;
  border-style: solid;
}
.boder-top-style {
  border-top-style: dotted;
  border-width: 5px;
}
.boder-right-style {
  border-right-style: dashed;
  border-width: 5px;
}
.boder-bottom-style {
  border-bottom-style: double;
  border-width: 5px;
}
.boder-left-style {
  border-left-style: groove;
  border-width: 5px;
}
出力結果
上辺指定
右辺指定
下辺指定
左辺指定

ボーダースタイル

属性簡易説明
noneボーダーを表示しない
dotted点線
dashed破線
solid実線
double二重下線
groove浮き出た線
※ボックスの内側が浮いて見える
ridgeくぼんだ線。
※ボックスの内側がくぼんで見える
insetインセット。
※ボックスの外側が浮いて見える
outsetアウトセット。
※ボックスの外側がくぼんで見える
border-styleプロパティ(種類)
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>border-styleプロパティ(種類)に関して</title>
  </head>

  <body>
    <div class="boder-style-none">スタイル(none)</div>
    <div class="boder-style-dotted">スタイル(dotted)</div>
    <div class="boder-style-dashed">スタイル(dashed)</div>
    <div class="boder-style-solid">スタイル(solid)</div>
    <div class="boder-style-double">スタイル(double)</div>
    <div class="boder-style-groove">スタイル(groove)</div>
    <div class="boder-style-ridge">スタイル(ridge)</div>
    <div class="boder-style-inset">スタイル(inset)</div>
    <div class="boder-style-outset">スタイル(outset)</div>
  </body>
</html>
div {
  margin: 5px;
  border-style: solid;
}
.boder-style-none {
  border-style: none;
  border-width: 5px;
}
.boder-style-dotted {
  border-style: dotted;
  border-width: 5px;
}
.boder-style-dashed {
  border-style: dashed;
  border-width: 5px;
}
.boder-style-solid {
  border-style: solid;
  border-width: 5px;
}
.boder-style-double {
  border-style: double;
  border-width: 5px;
}
.boder-style-groove {
  border-style: groove;
  border-width: 5px;
}
.boder-style-ridge {
  border-style: ridge;
  border-width: 5px;
}
.boder-style-inset {
  border-style: inset;
  border-width: 5px;
}
.boder-style-outset {
  border-style: outset;
  border-width: 5px;
}
出力結果
スタイル(none)
スタイル(dotted)
スタイル(dashed)
スタイル(solid)
スタイル(double)
スタイル(groove)
スタイル(ridge)
スタイル(inset)
スタイル(outset)
CSS
記事の内容
閉じる