WEB開発

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

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

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の種類の紹介でした。

-WEB開発
-,