【CSS】borderで枠線を作成する方法 -初心者向け-

CSSのみでデザインをする時に多く使用されるborderプロパティの基本的な使い方を初心者向けに解説します。今回は見出しやボタンなどborderを使用したデザイン例も用意しましたので制作の参考にしてみてください。 また、CodePenで公開されているCSSボーダーのデザインのアイデアもピックアップしましたので合わせてご覧ください。

目　次




borderの使い方


borderプロパティ
.style { border:線種 太さ カラー；}

borderの基本的な書き方は要素の線種(border-style) 太さ(border-width) カラー(border-color) のプロパティを半角スペースで区切り一括指定(ショートハンド)します。
線種・太さ・カラーを記述する順番は自由で、必要ないプロパティは省略することもできます。（省略したプロパティの値は初期値となります。）

CSS
1
2
3
4
5
6
.sytle {
    border-top: solid 1px #000000; /*枠線(上部)指定*/
    border-right: solid 1px #000000; /*枠線(右部)指定*/
    border-bottom: solid 1px #000000; /*枠線(下部)指定*/
    border-left: solid 1px #000000; /*枠線(左部)指定*/
}

下線だけborderを引きたい場合や、上下左右ごとにborderの太さやカラーを変えたい場合は上(border-top) 右(border-right) 下(border-bottom) 左(border-left) で個別に指定します。


1

線種 (border-style)


線種 (border-style)はsolid(1本線) double(2本線) dotted(点線) を使用することが多いと思いますが、破線や立体的なスタイルもあります。

solid

border-style：solidは、1本線のスタイル

border solid

html
1
<p class="border01" >border solid</p>
CSS
1
2
3
4
5
6
7
8
.border01{
     display:block;
     width: 250px;
     height:70px;
     line-height: 70px;
     text-align: center;
     border:solid 10px navy;
}

double

border-style：doubleは、2本線のスタイル

border double

CSS
1
2
3
.border02{
     border:double 10px navy;
}

dotted

border-style：dottedは、点線のスタイル

border dotted

CSS
1
2
3
.border03{
     border:dotted 10px navy;
}

dashed

border-style：dashedは、破線のスタイル

border dashed

CSS
1
2
3
.border04{
     border:dashed 10px navy;
}

groove

border-style：grooveは、立体的(凹凸)な窪んだ線のスタイル

border groove

CSS
1
2
3
.border05{
     border:groove 10px silver;
}

ridge

border-style：ridgeは、立体的(凹凸)な隆起した線のスタイル

border ridge

CSS
1
2
3
.border06{
     border:ridge 10px silver;
}

inset

border-style：insetは、上と左のボーダーを暗く、右と下のボーダーを明るくした立体的(凹)な線のスタイル

border inset

CSS
1
2
3
.border07{
     border:inset 10px silver;
}

outset

border-style：outsetは、上と左のボーダーを明るく、右と下のボーダーを暗くした立体的(凸)な線のスタイル

border outset

CSS
1
2
3
.border08{
     border:outset 10px silver;
}

2

線の太さ (border-width)


線の太さ (border-width)についてはpxやemなどの数値で指定することがオーソドックスですが、キーワード thin(細い) medium(普通) thick(太い)でも指定することができます。但し、キーワードでの指定はブラウザによって線の太さの見え方が異なります。

thin

border-width:thinは、細い線

thin

CSS
1
2
3
.border09{
     border:solid thin navy;
}

medium

border-width:mediumは、普通の線

medium

CSS
1
2
3
.border10{
     border:solid medium navy;
}

thick

border-width:thickは、太い線

thick

CSS
1
2
3
.border11{
     border:solid thick navy;
}


3

線のカラー (border-color)

線のカラー (border-color)は16進数(#000000)かカラーネーム(color)で指定します。下図は上下左右のカラーを変えた例です。

border

CSS
1
2
3
4
5
6
.border_color{
     border-top: solid 10px orange; /*枠線(上部)指定*/
     border-right: solid 10px red; /*枠線(右部)指定*/
     border-bottom: solid 10px green; /*枠線(下部)指定*/
     border-left: solid 10px blue; /*枠線(左部)指定*/
}


CSSボーダーのデザイン例


CSSのみでデザインする際に使用されるborderの使い方の例を紹介します。


1

タイトル・見出しの装飾

CSSの疑似要素::afterを使用し下線のborderを2カラーにしたデザイン例

見出しデザイン

html
1
<h1>見出しデザイン</h1>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
h1 {
     position: relative;
     padding-bottom: 0.5em;
     border-bottom: 4px solid #DDD;
}
 
h1::after {
     position: absolute;
     content: " ";
     border-bottom: solid 4px #446689;
     bottom: -4px;
     width:10%;
     display: block;
}

CSSで簡単に作れるおしゃれな見出しデザイン

design.webclips.jp/css-midashi-ribon/



2

CSSボタンの装飾

下線border-bottomを使用して立体感のあるCSSボタンにしたデザイン例。クリックで下線をborder-bottom: none;を消しボタンの押しこみを表現。

html
1
<a class="button01" href="#">Button</a>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.button01{
     display:block;
     width: 250px;
     height:70px;
     line-height: 70px;
     color: #FFF;
     text-decoration: none;
     text-align: center;
     background-color: #f39800; /*ボタン色*/
     border-bottom: solid 6px #ec6c00; /*下線色*/
     border-radius: 5px; /*角丸*/
}
.button01:hover{
     background-color: #f9c500;/*ボタン色*/
     border-bottom: solid 6px #f39800; /*下線色*/
}
.button01:active {
     margin-top: 6px;
     border-bottom: none;
     -webkit-transform: translateY(6px);　/*下移動*/
     transform: translateY(6px);
}

CSSで実装するボタンデザインのアイデア

design.webclips.jp/css-button/



3

テキスト領域の装飾

文章中にある別記やポイントなど、テキスト領域のデザイン例。CSSの疑似要素を使用しラベル(POINT)を左上に配置。

ポイント文章
html
1
<div class="point01" >ポイント文章</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.point01{
     position:relative;
     padding:30px;
     border:8px solid navy;
     border-radius: 10px;
}
.point01::after{
     content: "POINT";
     position: absolute;
     top: -15px;
     left: 13px;
     background: #fff;
     font-size:1em;
     font-weight: bold;
     color: navy;
     padding: 0 8px;
}

その他にCSSだけで三角・矢印を作るときに、borderを使用しデザインすることができますので下記記事も合わせてご覧ください。

画像を使わずにCSSだけで三角・矢印を作る方法

design.webclips.jp/css-arrow/



CSSボーター制作のアイデア


コードコミュニティサイトCodepenで公開しているborderを使用したデザインのアイデアから気になったものをピックアップしました。様々なborderの使い方がありますので参考にしてみてください。


Arrowed Progression Line

フォームなどで見られるSTEP表示にborderを使用し描画した例



Brick Sign Up Form

フォーカス部をborderで表現したフォームのデザイン例



CSS border in corners

CSSの疑似要素を使用しborderの四隅を括弧のようにしたデザイン例



Imperfect Buttons

border-radiusを使用して手書き風のborderにアレンジしたデザイン例



Simple Animations using CSS Borders

borderにアニメーションをつけたデザイン例



CSS Border transitions

マウスオーバーでborderにアニメーションをつけたCSSボタンのデザイン例

borderといっても枠線だけでなくアイデア次第では、様々なデザインで活用することができますので参考にしてみてください。以上、border(ボーダー)の基本的な使い方の解説でした。




＼ Webデザインに関するお役立ち情報を定期的に配信中 ／

Follow @webclips_jp

  • 【CodePen】ハンバーガーメニューのアイデア10選
  • CSSグラデーションの作成に役立つジェネレーター・Webサービス11選
  • CSSボタンのデザインとホバーエフェクトのアイデア
  • 【CodePen】トグルボタン(スイッチ)のアイデア15選
  • 【CodePen】マグネットボタンのアイデア10選
  • 【CodePen】Ken Burns Effectのアイデア8選
PopularPosts
  • 無料で使えるフリーイラスト素材サイト55選（商用利用可)
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 漢字が使える日本語フリーフォント97選（商用利用可）
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 無料で使えるデジタル風フォント13選
  • ビジネス系イラストをダウンロードできるフリー素材サイト7選
WordPress対応! 初心者におすすめのレンタルサーバー特集
RecentPosts
  • 【2025年6月版】WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )
  • 無料で使えるフリーイラスト素材サイト55選（商用利用可)
  • Photoshopで使用できる“水しぶき系”ブラシ8選
  • アイソメトリックイラストをダウンロードできるフリー素材サイト6選
  • 人物の線画イラストをダウンロードできるフリー素材サイト7選
  • イラスト素材サイト「イラストAC」の使い方 (商用利用可)