HTML CSS examples for CSS Widget:Border Style
Create Vertical Border with Horizontal Gradients
<html> <head> <style> body { background: #fff; padding: 30px; } .box {<!-- w ww . j av a 2 s . c om--> position: relative; width: 100px; height: 200px; padding: 20px; background: #ccc; } .box:before, .box:after { content: ""; position: absolute; display: block; left: -10px; width: 1px; height: 50%; } .box:before { top: 0; background: linear-gradient(to top, #333 0%, transparent 100%); } .box:after { bottom: 0; background: linear-gradient(to bottom, #333 0%, transparent 100%); } </style> </head> <body> <div class="box"> content here </div> </body> </html>