Edit This Code:
See Result »
<!DOCTYPE html> <html> <head> <style> p { border-style: solid; } 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 _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?73c27e26f610eb3c9f3feb0c75b03925"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </head> <body> <p class="none">No left border.</p> <p class="dotted">A dotted left border.</p> <p class="dashed">A dashed left border.</p> <p class="solid">A solid left border.</p> <p class="double">A double left border.</p> <p class="groove">A groove left border.</p> <p class="ridge">A ridge left border.</p> <p class="inset">An inset left border.</p> <p class="outset">An outset left border.</p> </body> </html>
Result: