Gradient borders with CSS

Original design 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:
  • It has rounded corners
  • The border has a gradient
  • The box itself has a gradient
But after some searches on Google and some experimenting, it wasn't that hard after all.
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: Step 1
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:
Step 2 firefox
Chrome:
Step 2 chrome
Internet Exporer:
Step 2 internet explorer
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:
Step 3 firefox
Chrome:
Step 3 chrome
Internet Exporer:
Step 3 internet explorer