CSS borderの線が出ないを解決！初心者も迷わない基礎＆実装のコツ

CSSのborderはプロパティの組み合わせ方や優先順位を正しく理解すれば、スムーズな実装が可能です。

CSSでの枠線の指定はとてもシンプルですが、線の太さ・種類・色の指定方法を知らずに使うと意図しない見た目になってしまいます。

そこで本記事ではCSSのborderプロパティの基本から、現場で役立つテクニック、失敗パターンとその対処法まで丁寧に解説します。

CSS borderとは

CSSのborderプロパティは、HTML要素の周りに枠線をつくるものです。

デザインのアクセントとして使ったり、要素の範囲を明確にするなど、さまざまな目的で利用できます。

borderは、主に以下の3つの要素で構成されます。

• 太さ (width)
• スタイル (style)
• 色 (color)

この3つを理解することで、borderを使いこなせるようになります。

▶table borderの基本や表示されない解決法はこちら

CSS borderの基本的な書き方

borderプロパティで線を引く2つの方法を紹介します。

• 基本的な書き方
• 個別プロパティでの指定方法

まずは、簡単で便利な基本的な書き方から見てみてください。

基本的な書き方

borderの太さ・スタイル・色の必要な情報をまとめて一行で書く、ショートハンドを紹介します。

以下のコードを見てみましょう。

コピー.box {
border: 2px solid #333;
/* 太さ2px、実線、黒色の枠線をつける */
}

上記のように指定すると、一行だけで2pxの黒い枠線を表示できます。

要素の順番は入れ替えても動作しますが、線の「太さ・種類・色」の順で書くのが一般的なため、順番を覚えておくとほかのコーダーが読むときもスムーズです。

個別プロパティでの指定方法

個別プロパティの指定は、「線の色だけ変えたい」「太さだけ変更したい」といった場合に役立ちます。

• border-width｜線の太さ
• border-style｜線の種類
• border-color｜線の色

それぞれのプロパティを理解すれば、より自由なデザイン調整が可能です。

border-width｜線の太さ

border-width は、線の太さ（幅）を指定するプロパティです。

値は、thinやmediumといったキーワードで指定できますが、pxがよく使用されています。

しかし、線の太さを5pxにしたくてborder-widthだけを指定しても線は表示されません。

どんな種類の線を引くのか指定しない限り表示されないため、必ずborder-styleも一緒に指定しましょう。

border-style｜線の種類

border-styleは、ボーダーをどんな見た目の線にするかを決めるプロパティです。

border-styleを指定しないと、widthやcolorをいくら指定してもボーダーは現れません。

たくさんの種類がありますが、まずは代表的なものを覚えましょう。

border-styleは、border-widthと一緒に使わないと線が見えないため注意してください。

border-color｜線の色

border-color は、枠線の色を指定するプロパティです。

色の指定は、redやblueのような色の名前で直感的に指定できたり、#で始まる16進数カラーコードや赤・緑・青の強さと透明度を指定するRGBAなどの方法があります。

border-colorを指定しなかった場合、ボーダーの色は、その要素の文字色（colorプロパティの値）と同じになります。

現場で役立つborder活用パターン

CSSの border は、ただ線を引くだけでなく、部分的に適用したり、非表示にしたり、角を丸めたりと、実務で非常に多く使われます。ここでは、よく使うテクニックを具体例付きで紹介します。

ここでは、以下の3つについて紹介します。

• 特定の辺のみにborderを適用する
• borderを表示・非表示にする
• border-radiusで角を丸くする

Webサイト制作の現場では、単に四角で囲むだけでなく、borderをUI（ユーザーインターフェース）の一部として巧みに利用します。

特定の辺のみにborderを適用する

四角すべてに線を引くのではなく、上線だけ引きたい、下線だけ引きたいときに使用します。

レイアウトを邪魔せずアクセントをつけたいときに使いやすいのがメリットです。

特定の辺にだけborderを適用するには、以下のプロパティを指定します。

たとえば、見出しに下線だけを引きたいときは次のように書きます。

コピー.title {
border-bottom: 3px solid #3498db;
padding: 0.3em 0; /*上下の余白*/
width: 80px;
text-align: center;
}

border-bottomのように、特定の辺を指定するプロパティは、borderと同じように線の太さ・種類・色の値を半角スペースで区切って一行で指定できます。

borderを表示・非表示にする

CSSでボーダーを消すには、単に枠線をなくす方法と、枠線のスペースは残しつつ色だけ透明化する方法の２つがあります。

表示・非表示を判断するポイントを以下にまとめました。

border: none;は枠線が消えてしまうことから、レイアウト崩れを見逃しやすくなるため、使用するときは十分に気をつけましょう。

また、border-color: transparent;はリンクやボタンのホバーエフェクトをしたいときなど、要素やレイアウトを維持したまま、色を出したりアニメーションをつけたりしたいときに便利です。

border-radiusで角を丸くする

border-radiusを使用すると、角を丸くできます。

ボタンやカードUIでよく使われ、柔らかくて親しみやすい印象を与えるプロパティです。

基本的な書き方は、以下のとおりです。

値にはpxやrem、%などの単位を指定し、数字が大きいほど丸みの半径が大きくなり、角がより丸くなります。

▶基礎からわかるborder-radiusで角丸を作る基本はこちら

CSS borderの実装でよくあるミスの解決策

borderを実装するときによくあるミスは、以下の3つです。

• ボーダーが表示されない
• 角丸にならない
• 色が変わらない

単純に見えて意外な落とし穴があるため、チェックしてみてください。

ボーダーが表示されない

画面を何度リロードしてもボーダーが表示されないときは、border-styleの指定し忘れが原因です。

border-styleで線の種類を指定していなければ、CSSがどんな線を引けばいいのか判断できず、何も表示されません。

ボーダーを表示させるには線の「太さ・種類・色」の3要素が必要で、なかでもborder-styleは必須プロパティです。

指定漏れを防ぐために、一行でまとめて書くショートハンドで書く癖をつけるのがおすすめです。

ボーダーの太さborder-widthの単位の指定を忘れてしまうこともよくあるため、気をつけましょう。

角丸にならない

border-radiusを指定したにもかかわらず、角丸にならないときはいくつかの要因が考えられます。

border-widthの単位のつけ忘れや要素の高さ・幅が足りないときも、意図した通りに表示になりません。

border-radiusの値は要素の幅や高さの半分が上限です。

たとえば、高さ40pxのボタンにborder-radius: 100px;と指定しても、丸みは高さの半分である20pxで頭打ちになります。

大きな値を指定したのに、思ったより丸くならないときは、要素のサイズを確認してみましょう。

そのほかの原因については、以下の記事で解説しています。

▶基礎からわかるborder-radiusで角丸を作る基本はこちら

色が変わらない

ボーダーの色を指定しても画面上で変化が見られないときは、以下の3つを確認してください。

• transparentとnoneが混同していないか
• 親要素の文字色を継承していないか
• ショートハンドで上書きしていないか

これらをチェックすることで、色が変わらない状況を素早く解消できます。

transparentとnoneが混同していないか

border: none; は「線そのもの」を消してしまうため、あとから色を指定しても枠線が復活しません。

色だけを一時的に消したいときは、border-color: transparent; を使用します。

たとえば、ボタンにホバーしたときにボーダーの色を変更したいときを見てみましょう。

コピー.btn-ng {
padding: 10px 20px;
border: none; /* 初期状態：ボーダーそのものが存在しない */
background-color: #fff;
font-weight: bold;
text-align: center;
width: 100px;
color: #007bff;
cursor: pointer;
transition: border-color 0.3s;
}
.btn-ng:hover {
border-color: #007bff;
}

上記のようにbtn-ngクラスに、border: none;を指定してホバー時の色を指定しても表示するボーダーがないため、無反応になります。

ホバー時にボーダーを出したい場合は、最初からborderを透明で設定しておき、border-colorだけを変えるようにするのがポイントです。

枠線が見えないだけで、枠線自体は存在しているため、ホバーで色指定をしても、色変更ができます。

親要素の文字色を継承していないか

CSSでborder-styleとborder-widthを指定し、色を省略すると、枠線の色は自動的に親要素の文字色を継承します。

これはボーダーの色＝テキストの色という一貫性を保つためのCSSの仕様があるからです。たとえば、親要素でcolor: red; を指定していると、その子要素のボーダーも赤になります。

文字色を変えるたびに意図せずボーダー色も変わるため、「色を指定したはずなのに反映されない」と混乱する原因になります。

ボーダーに固有の色を使うときは、border-color: #333; や border: 1px solid blue; のように明示的にカラーを指定しましょう。

ショートハンドで上書きしていないか

borderのショートハンドを後から使うと、前に設定したborder-colorが丸ごと上書きされます。

たとえば、以下のコードを見てみましょう。

コピー.box {
border-color: red;
border: 2px solid blue; /* ショートハンドで幅・種類・色を青に上書き */
/* → 結果、赤を指定したつもりでも“青い実線”になってしまう */
}

上記ではボーダーカラーを赤にしたくてborder-colorで指定したあとに、ショートハンドでborder: 2px solid blue; を書いています。

この場合、赤を指定したつもりでも結果的には上書きされて青い実線が表示されます。

CSSはあとから書いたものが優先されるルールです。

ショートハンドでまとめて設定することを徹底するか、色だけを後から変えたいときは border-colorのみ書くようにすると予期せぬ上書きを防げて、可読性が向上します。

まとめ：CSS borderで思い通りの枠線を描こう

CSSのborderプロパティは、要素の強調や装飾に欠かせません。

ショートハンドや個別指定、特定の辺への適用、非表示や角丸など、多彩な表現ができます。

ボーダー表示のポイントは、線の太さ・種類・色を正しく設定することです。

実装例やトラブル対策も活用しながら、自在に枠線をデザインしていきましょう。

正確な指定スキルを身につければ、UIの表現力が向上し、コーディングの幅も大きく広がります。

Web制作を仕事にするならデイトラWeb制作コースがおすすめ！

東京フリーランスは、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。

デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。

HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分！Web制作を網羅的に学べます。

また、中級・上級の最終課題はメンターによる課題レビューつき！品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。
Discordによる公式サポートの質問部屋も用意。実務を経験しているメンター陣があなたの疑問に回答してくれます。

3/24　#デイトラ　#Web制作コース　備忘録

⌛️学習時間：4H
✅中級編 Day13-1まで

「余裕ある人向け課題」でつまずいたのでメンターさんに質問させていただいた。分からないところをまずは自分で考えるけど、聞ける人がいる環境に感謝🙏明日もがんばろー🙌

— Gillian | Web制作してます (@Gillian6to2) March 24, 2025

<ひがちゃんエンジニア100日計画＞
（89日目）#デイトラ #Web制作

WPテーマの初期設定＋テンプレートファイル作成

6h

今日は、メンターに初めて質問できた。時間かかったし、緊張したけど、つまずきがすく解決した！質問できるようになったのは、非常にデカい！活かしていきたい🐫

— ひがちゃん＠Webコーダー (@hjga_webconsul) April 7, 2025

Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！