How can I get multiple borders with rounded corners? CSS

Question

Any idea on how I can get round corners work with multiple borders? The box will be dynamic, depending what will be inputed into the box, so I can\'t add static width or hei

Answer 1

The only CSS solution I can offer is limited to a double border, with the space between those borders the same colour as the background of the bordered element, for example the html:

<div id="box">
    <p>Some content</p>
</div>

Coupled to the css:

#box {
    border: 10px double #f90;
    border-radius: 1.5em;
    padding: 1em;
    color: #000;
    background-color: #ffa;
}

Gives a JS Fiddle demo...

Answer 2

Just found another cleaner way to do it

Live demo and code here: http://jsfiddle.net/mYGsh/1/

[This demo has 8 different borders]

The HTML:

<p class="gradient-border">This is an example of a box with a gradient border. This example will currently work in Mozilla and Firefox browsers.</p>

The CSS:

.gradient-border {
    border: 8px solid #000;
    -moz-border-radius: 12px;
    -moz-border-bottom-colors: #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
    -moz-border-top-colors:    #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
    -moz-border-left-colors:   #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
    -moz-border-right-colors:  #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
    padding: 5px 5px 5px 15px;
}