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

2020/01/05

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

borderの種類

none

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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