【CSS】サンプルで見るborderの種類

スポンサーリンク
WEB開発

cssで指定できるborderの種類を実際のサンプルで紹介します。


none

[none]を指定しています。

.bn{
    padding: 1em;
    border: none;
}

<div class="bn">
    [none]を指定しています。
</div>

solid

[solid]を指定しています。

.bs{
    padding: 1em;
    border: 1px solid #4F81C7;
}

<div class="bs">
    [solid]を指定しています。
</div>

double

[double]を指定しています。

.bdouble{
    padding: 1em;
    border: 4px double #4F81C7;
}

<div class="bdouble">
    [double]を指定しています。
</div>

dotted

[dotted]を指定しています。

.bdotted{
    padding: 1em;
    border: 1px dotted #4F81C7;
}

<div class="bdotted">
    [dotted]を指定しています。
</div>

dashed

[dashed]を指定しています。

.bdashed{
    padding: 1em;
    border: 1px dashed #4F81C7;
}

<div class="bdashed">
    [dashed]を指定しています。
</div>

groove

[groove]を指定しています。

.bgroove{
    padding: 1em;
    border: 4px groove #4F81C7;
}

<div class="bgroove">
    [groove]を指定しています。
</div>

ridge

[ridge]を指定しています。

.bridge{
    padding: 1em;
    border: 4px ridge #4F81C7;
}

<div class="bridge">
    [ridge]を指定しています。
</div>

inset

[inset]を指定しています。

.binset{
    padding: 1em;
    border: 4px inset #4F81C7;
}

<div class="binset">
    [inset]を指定しています。
</div>

outset

[outset]を指定しています。

.boutset{
    padding: 1em;
    border: 4px outset #4F81C7;
}

<div class="boutset">
    [outset]を指定しています。
</div>

以上、CSSで指定できるborderの種類の紹介でした。

暇な時間にU-NEXT

今なら無料1ヶ月無料トライアル600円分の有料コンテンツを使えるチャンス!

見放題作品が31日間無料で視聴可能最新作はレンタル配信!

600円分のポイントプレゼント!DVD・ブルーレイよりも先行配信の最新作、放送中ドラマの視聴や最新コミックの購入に使用可能

 

追加料金なく、80誌以上の雑誌が読み放題

WEB開発
スポンサーリンク
uediveをフォローする
SEの休日

コメント

タイトルとURLをコピーしました