Tryit Editor T4Tutorials.com - Border-Width-CSS
Edit This Code:
See Result »
<html> <head> <style> p.dotted { border-style: dotted; border-width: 5px; font-size: 30px; font-weight: bold; font-style: italic; } p.dashed { border-style: dashed; border-width: 5px; font-size: 30px; font-weight: bold; font-style: italic; } p.solid { border-style: solid; border-width: 5px; font-size: 30px; font-weight: bold; font-style: italic; } p.double { border-style: double; border-width: 5px; font-size: 30px; font-weight: bold; font-style: italic; } p.groove { border-style: groove; border-width: 5px; font-size: 30px; font-weight: bold; font-style: italic; } p.ridge { border-style: ridge; border-width: 5px; font-size: 30px; font-weight: bold; font-style: italic; } p.inset { border-style: inset; border-width: 5px; font-size: 30px; font-weight: bold; font-style: italic; } p.outset { border-style: outset; border-width: 5px; font-size: 30px; font-weight: bold; font-style: italic; } p.none { border-style: none; border-width: 5px; font-size: 30px; font-weight: bold; font-style: italic; } p.hidden { border-style: hidden; border-width: 5px; font-size: 30px; font-weight: bold; font-style: italic; } p.mix { border-style: dotted dashed solid double; border-width: 5px; font-size: 30px; font-weight: bold; font-style: italic; } </style> </head> <body> <h1>The border-style Property:</h1> <p class="dotted">Dotted border.</p> <p class="dashed">Dashed border.</p> <p class="solid">Solid border.</p> <p class="double">Double border.</p> <p class="groove">Groove border.</p> <p class="ridge">Ridge border.</p> <p class="inset">Inset border.</p> <p class="outset">Outset border.</p> <p class="none">No border.</p> <p class="hidden">Hidden border.</p> <p class="mix">Mixed border.</p> <img src="logo.jpg"/> </body> </html>
Result: