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

Hello World!!!!

    THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.

Above is for the HTML, below is for the CSS.

    body { background: #d2d1d0; }

#box {
    background: #F4F4F4;
    border: 3px solid blue;
    position: relative;
    height: 100%;
    width: 100%;
}

#box p {
    padding: 10px;
}

#box:before {
    -moz-border-radius: 15px;
    border-radius: 15px;
}

#box {
    -moz-border-radius: 9px;
    border-radius: 9px;
}

#box:after {
    -moz-border-radius: 12px;
    border-radius: 12px;
}

#box:before {
    border: 3px solid red;
    content: '';
    position: absolute;
    top: -9px;
    right: -9px;
    bottom: -9px;
    left: -9px;
}

#box:after {
    border: 3px solid green;
    content: '';
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
}

http://jsfiddle.net/H7QjP/7/ [Live Example with code]

Like this. Credits to to jnpcl for giving me something to build off, I just changed the border radii so that they lined up a little tighter.