The border-style property sets the style of an element's for borders. List of all the border styles as shown on below sample.
DEMO
Solid
Dotted
Dashed
Double
Groove
Ridge
Inset
Outset
HTML
<article class="grid-box"> <div class="solid">Solid</div> <div class="dotted">Dotted</div> <div class="dashed">Dashed</div> <div class="double">Double</div> <div class="groove">Groove</div> <div class="ridge">Ridge</div> <div class="inset">Inset</div> <div class="outset">Outset</div> </article>
CSS
.grid-box { display: grid; grid-template-columns: auto auto; grid-gap: 0.5em; } .grid-box div { border-width: 6px; padding: 0.5em; border-color: hotpink; } .grid-box div.solid { border-style: solid; } .grid-box div.dotted { border-style: dotted; } .grid-box div.dashed{ border-style: dashed; } .grid-box div.double{ border-style: double; } .grid-box div.groove{ border-style: groove; } .grid-box div.ridge{ border-style: ridge; } .grid-box div.inset{ border-style: inset; } .grid-box div.outset{ border-style: outset; }
Comments
Post a Comment