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 {border-style: solid; border-color: red; } p.none {border-left-style: none;} p.dotted {border-left-style: dotted;} p.dashed {border-left-style: dashed;} p.solid {border-left-style: solid;} p.double {border-left-style: double;} p.groove {border-left-style: groove;} p.ridge {border-left-style: ridge;} p.inset {border-left-style: inset;} p.outset {border-left-style: outset;} </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 left border exampple.</p> <p class="dotted"> dotted left border example.</p> <p class="dashed">dashed left border example.</p> <p class="solid">solid left border example.</p> <p class="double">double left border example.</p> <p class="groove">groove left border example.</p> <p class="ridge">ridge left border example.</p> <p class="inset"> inset left border example.</p> <p class="outset"> outset left border example.</p> <h1>Notice the each left border</h1> </body> </html>