コピペOK！CSSで書けるborder(線)覚え書き

2021年12月14日

CSSで可能な基本のボーダー装飾というのはそもそも限られていて、「線」「点線」「破線」「二重線」くらいしかない。

美しい目次枠が欲しいというお話を頂いたのだけれど、ご希望の案がどれもCSSで対応できません……と思ったところで、ああ、これも画像を使えばいいよねと思いつく。

CSSで作るボーダー「線」カスタマイズ

と言ってもただ、ものすごく狭い背景画像を配した棒を表示するだけなのですが。

まずは基本のborder　CSS

solid　1本線
double　2本線
groove　立体凹線
ridge　立体凸線
inset　上と左のボーダーが暗く、下と右のボーダーが明るくなる
outset　上と左のボーダーが明るく、下と右のボーダーが暗くなる
dashed　破線
dotted　点線

基本はボーダーを表示するためのコードをHTMLで指定して

<div class="border-1"></div>
<div class="border-2"></div>
<div class="border-3"></div>
<div class="border-4"></div>

CSSで装飾を指定する。

.border-1 {border-width: 3px 0 0 0;
	border-style: solid;
	border-color: #aa4c8f;}

.border-2 {border-width: 10px 0 0 0;
	border-style: double;
	border-color: #f0908d;}

.border-3 {border-width: 5px 0 0 0;
	border-style: dashed;
	border-color: #aa4c8f;}

.border-4 {border-width: 6px 0 0 0;
	border-style: dotted;
	border-color: #f0908d;}

“px”は太さです。

CSS のみで装飾する変化球ボーダー

いわゆるCSSのみで作る背景装飾を細く細くして棒にしたものです。

斜線

HTML

<div class="border-5"></div>

CSS

.border-5 {
	background-color:#dfdfdf ;
}
.border-5 {
    background-image: linear-gradient(-45deg, #c4a3bf 25%, #f9f8f7 25%, #f9f8f7 50%, #c4a3bf 50%, #c4a3bf 75%, #f9f8f7 75%, #f9f8f7);
    background-size: 10px 10px;
    height: 10px;
}

ドット

HTML

<div class="border-6"></div>

CSS

.border-6 {
    background-color: #000;
    background-image: radial-gradient(#c4a3bf 15%, transparent 3%), radial-gradient(#c4a3bf 15%, transparent 5%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    height: 15px;
}

変わりストライプ

HTML

<div class="border-7"></div>

CSS

.border-7 {
    background-color: #9d5b8b;
    background-image: linear-gradient(to left,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.2) 40%), linear-gradient(to left,rgba(255,255,255,0.9) 5%,rgba(255,255,255,0.1) 20%);
    background-size: 20px 20px,30px 30px;
    height: 11px;
}

色は” #●●●●● “の部分を改変してください。
線の太さ(高さ)は” height: 11px; “の部分を改変

ボーダーの中に画像を入れる

もっと複雑な模様のボーダーが欲しいんだ！……と、なったら画像を使うしかありません。

やる事は「画像背景見出し」と同じ。

あわせて読みたい

CSSで見出しに背景画像を付ける方法(THE・THOR (ザ・トール) 以外でもOK) カスタマイズに熱が入るとトップの画像から枠からアイコンから目次から……色々とやりたくなるわけで、中でも見出しは誰でもいじりたくなる所。「見出しを可愛く」の声が...

見出しよりも細いので、見栄えの良い画像のチョイスも大変ですね。

HTML

<div class="border-8"></div>

CSS


.border-8 {
    border-style: solid;
    border-width: 10px;
    border-image: url(画像URL.jpg) 30 repeat;
}

サンプルは大きな画像を使用しています。細いスペースなので軽くて小さな画像を繰り返す方がよろしいかと。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

主にWordpress中心のサイト・ブログ制作＆コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ＆Wordpressカスタマイズ案件実績500件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得(GA4)。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

カスタマイズのご依頼は「一木堂」へ

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。