CodeLab
Tutorials For Everyone
Run
<!Doctype HTML> <html> <head> <title>CSS Borders Style</title> <style> .dotted{border-style: dotted;} .dashed{border-style: dashed;} .solid{border-style: solid;} .double{border-style: double;} .groove{border-style: groove;} .ridge{border-style: ridge;} .inset{border-style: inset;} .outset{border-style: outset;} .hidden{border-style: hidden;} .none{border-style: none;} .combination1{border-style: dotted double groove ridge;} .combination2{border-style: dashed solid outset hidden;} </style> </head> <body> <h2>CSS border style</h2> The border style property can define the style of border of an element. See the illustrations below. <p class="dotted">Dotted border of this paragraph.</p> <p class="dashed">Dashed border of this paragraph.</p> <p class="solid">A solid border of this paragraph.</p> <p class="double">A double border of this paragraph.</p> <p class="groove">This paragraph has groove border style.</p> <p class="ridge">Ridge border of this paragraph.</p> <p class="inset">The border style is inset.</p> <p class="outset">The border style is outset.</p> <p class="none">No border.</p> <p class="hidden">Border is hidden of this paragraph.</p> <p class="combination1">Combination of border styles for different sides of this paragraph.</p> <p class="combination2">Combination of border styles for different sides of this paragraph.</p> </body> </html>