Pseudo Cross Browser Border Gradient
10 December 2012

Do you need to know how to make CSS border gradients? This swift article will show you how to make a pseudo cross browser border gradient. CSS Border gradients are easy to make once you know how, and with the right tool. The border gradients in this article work across browsers without using images to fall back on.

Making the CSS Gradient

Let's start by making the CSS gradient. Surprisingly CSS gradients can be made to work across most of, if not all of, the browser you are normally developing for. The tricky part is each browser has its own implementation. However, there are great tools online to take the labour out of making gradients. So we will make life easier for ourselves and use one.

The CSS gradient tool I've found and like is the colorzilla gradient editor. The makers of the Colorzilla gradient editor tool provided a brilliant browser-based interface that comes with all the instructions you need for making the gradient.

Making the CSS Gradient a Border Gradient

In the solution below is the CSS gradient that was generated by the Colorzilla gradient editor tool. I've put the gradient CSS inside a class that is named 'border-gradient'.

Using this CSS we will make a border or at least a pseudo border (pseudo as in not real as opposed to a CSS pseudo-class). To do this just add padding and make sure the box doesn't collapse. You can stop the box from collapsing by using an in-line block or by floating the box with its overflow property set to hidden.

Then just put a box inside of the box and set the background to a solid colour. The box that is inside the box needs to be displayed as an in-line block. That is it - I said it was easy. Easy with thanks to the hard work that the online gradient editor tools of course, without them it would be tricky.

CSS Border Gradient Demo

See the border gradient example.

CSS Border Gradient Solution

.border-gradient{
	background: #58332b; /* Old browsers */
	/* IE9 SVG, needs conditional override of \'filter\' to \'none\' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU4MzMyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZWYwZTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #58332b 0%, #bef0e4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58332b), color-stop(100%,#bef0e4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #58332b 0%,#bef0e4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #58332b 0%,#bef0e4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #58332b 0%,#bef0e4 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #58332b 0%,#bef0e4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#58332b\', endColorstr=\'#bef0e4\',GradientType=0 ); /* IE6-8 */
	padding: 3px;
	display: inline;
	float: left;
	overflow: hidden;
}
.border-gradient .border-gradient-content{
	background-color: #FFFFFF;
	display: inline-block;
}

Conclusion

This solution gives the effect of a gradient border. People who view it will perceive a gradient border. Importantly, this solution works across all browsers, I have tested it in IE 7 through to IE 10, Opera, Safari, Firefox, and Chrome.