Gradient borders with CSS
![]() |
The graphic designer came up with a design that includes boxes like this. At first sight it seems to be difficult to create these with HTML and CSS. It has three problems:
| ||
Let's start with the round corners. I used the jQuery javascript library with the corner plugin.
It's a bit bloated for this particulair task, but I'm also using some of its other great features for my site.
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="https://github.com/malsup/corner/raw/master/jquery.corner.js"></script> <style type="text/css"> body { background-color: #ededed; } div.outer { background: #dddddd; width: 220px; height: 135px; } </style> <script type="text/javascript"> $(document).ready(function(){ $('.outer').corner("round 10px"); }); </script> </head> <body> <div class="outer"> <br>This box has round borders </div> </body> <html> | |||
It generates something like this: | ![]() |
||
Now add the gradient to it. I'm only showing the CSS-part for our box:
div.outer { background: #dddddd; background: -moz-linear-gradient(100% 100% 115deg, #dddddd, #ffffff); /* mozilla, firefox */ background: -webkit-gradient(linear, left top, right bottom, from(#ffffff), to(#dddddd)); /* Safari, chrome */ width: 220px; height: 135px; }Internet explorer does support gradients. But these have some limitations and these cause weird behavior. For now, we leave this users with a more simple layout. Background images is a method to support this browser. So, the results will look like this: | |||
Firefox:![]() |
Chrome:![]() |
Internet Exporer:![]() |
|
The boxes we created now, will act as our border. We'll place a white box inside for the actual content. This box has a gradient also. The complete code looks like this:
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="https://github.com/malsup/corner/raw/master/jquery.corner.js"></script> <style type="text/css"> body { background-color: #ededed; } div.inner { background: white; background-image: -moz-linear-gradient(100% 100% 115deg, #f4f4f4, #fffffe 15%, #ffffff); background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.85, rgb(255,255,255)), color-stop(1, rgb(244,244,244))); height: 115px; } div.outer { background-color: #dddddd; background-image: -moz-linear-gradient(100% 100% 115deg, #dddddd, #ffffff); background-image: -webkit-gradient(linear, left top, right bottom, from(#ffffff), to(#dddddd)); padding: 2px; width: 220px; } </style> <script type="text/javascript"> $(document).ready(function(){ $('.inner').corner("round 8px"); $('.outer').corner("round 10px"); }); </script> </head> <body> <div class="outer"> <div class="inner"> <br>This box has round borders <br>and two gradients </div> </div> </body> <html>However our final result is not perfect like the original design, we're coming pretty close. It will do for now! | |||
Firefox:![]() |
Chrome:![]() |
Internet Exporer:![]() |