You can edit / change the code and click run button
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> p.none {border-style: none;} p.dotted {border: 1px dotted blue ;padding:3px;} p.dashed {border-style: dashed;} p.solid {border: 1px solid blue ;padding:3px;} p.double { border: 3px double blue;padding:3px; } p.groove {border: 7px groove blue ;padding:3px;} p.ridge {border: 7px ridge blue ;padding:3px;} p.inset {border: 7px inset blue ;padding:3px;} p.outset {border: 7px outset blue ;padding:3px;} p.hidden {border: 7px hidden blue ;padding:3px;} </style> <script>var clicky_site_ids = clicky_site_ids || []; clicky_site_ids.push(101319977);</script><script async src="//static.getclicky.com/js"></script></head> <body> <p class="none">No border.</p> <p class="dotted">This is a dotted border.</p> <p class="dashed">This is a dashed border.</p> <p class="solid">This is a solid border.</p> <p class="double">This is a double border.</p> <p class="groove">This is a groove border.</p> <p class="ridge">This is a ridge border.</p> <p class="inset">This is an inset border.</p> <p class="outset">This is an outset border.</p> <p class="hidden">This is a hidden border.</p> </body> </html>