Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS - Vertical Border with Horizontal Gradients

CSS - Vertical Border with Horizontal Gradients


I have a nifty vertical divider that has a horizontal gradient for certain parts of my page, and it works splendidly. This is just an image file that I apply as a centered background to a layer and float it there to get the effect I want.

Image Example Here

This works great, but I was wanting to try and do this to a table cell Border, so that it cut down that side and gave the slight gradient effect all the way down. Is this possible with CSS3?

I have explored This post a bit, and it does seem like this technique is feasible, but attempting to just add these gradients to the border property keeps coming up with failures.

Is there a specific technique involved in such an effect?


Small jsFiddle to demonstrate how the current divider works, and where I am trying to apply it in a normal table and what keeps happening when I try.


Problem courtesy of: Ciel


Extending from the comments above... This effect can be mimicked by using pseudo-elements on a container div. I think in your case, it may be better than trying to implement on a table border. For example, a wrapper div called 'box' or whatever class name you prefer...

.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%);

Check this DEMO. Also don't forget to add your vendor prefixes on background: linear-gradient in order to make it cross-browser.

Solution courtesy of: D.Alexander


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS - Vertical Border with Horizontal Gradients


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription