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

There are a few ways to get multiple borders with round corners. I personally go for a method that uses shadows. For your html code you could do something like this.

The HTML

    Hello World!!!!

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

The CSS

#box{
    border-radius: 15px;
    background: #f4f4f4;
    border: 3px solid #bbbbbb;

    box-shadow: 0 0 0 3px #8B2323, 
                0 0 0 6px #FF7F00, 
                0 0 0 9px #458B00;


    width: 100%;  
    height: 100%;
    margin: 10px auto;
    position: relative;
}​

Demo: http://jsfiddle.net/GdSfh/

I suggest if you want to find out more on multiple borders please read my tutorial on Multiple borders in css as it has a few other methods that might help you in the future. If you want to find more about shadows please also refer to my tutorial Shadows in css.