How can I get multiple borders with rounded corner

问题:

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 height.

    body { background: #d2d1d0; }

    #box {
        border-radius: 15px;
        background: #f4f4f4;
        border: 1px solid #bbbbbb;
        width: 100%;  
        height: 100%;
        margin: 10px auto;
        position: relative;
    }

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

    #box:before {
        border-radius: 15px;
        border: 1px solid white;
        width: 99%;  
        height: 94%;
        content: '';
        position: absolute;
    }

    #box:after {
        border-radius: 15px;
        content: '';
        position: absolute;
        border: 1px solid #bbbbbb;
        width: 98%;  
        height: 90%;
        left: 1px; top: 1px;
    }

HTML

<div id="box">Hello World!!!!<br>THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</div>

The problem I am currently having is when I stretch window not all borders stretch symmetrically, so how can I fix that? FYI I am currently interested getting CSS working in FF and Chrome.

回答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

<div id="box">
    Hello World!!!!<br>
    THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.
</div>

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.

回答2:

<div id="box">
<p>Hello World!!!!<br>
    THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</p>

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.

回答3:

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...

回答4:

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;
}

回答5:

I came up with this code for a linked image using an inline block border wrapped in a box shadow with a 2nd box shadow for a 2 layer border with a shadow, 3 layers total & No css styling needed.

inline block creates the 1st border then a box shadow creates the 2nd & icing on the cake adds the shadow followed by the rounding code that captures the inline block border as well.

To use it for text, just change image style to span style & replace image src with text & remove the link if you don't need it.

<a href="http://url" target="_blank">
<img style="display:inline-block;padding:1px;padding-left:2px;padding-top:10px;padding-bottom:10px;width:130px;border: 5px solid#001aff; box-shadow:0px 0px 0px 1px #000000, 0px 0px 25px 14px #001EA3;background: #000000;
border-radius: 5px;
-moz-border-radius: 5px
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;"
src="http://image.gif" height="41" align="absmiddle" /></a>

回答6:

I suggest using the excellent jQuery round corner plugin.

http://jquery.malsup.com/corner/

It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.

Here's How to use it

You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();

<body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script>$('div, p').corner();</script>
</body>

Check working example at http://jsfiddle.net/VLPpk/1

回答7:

To add to David's solution :

The double border is fairly limited. However, if you are willing to modify your markup, you can solve your problem by doing :

<div id="outerbox">
    <div id="box">Hello World!!!!<br>THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</div>
</div>

In your CSS :

#box 
{
        border-radius: 15px;
        border: 1px solid #bbbbbb;
        width: 100%;  
        height: 100%;
        position: relative;

}
#outerbox
{
    padding:10px;
    border : 1px solid #bbbbbb; 
    background: #f4f4f4; 
    border-radius: 15px;
}

This will allow you to set the background color between the two borders to what you want. It will also let you play with the width of your border.

http://jsfiddle.net/rPsdK/1/

回答8:

Try this one:

Live Demo

<style type="text/css">
body { background: #d2d1d0; }
#box {
    background: #F4F4F4;
    border: 1px solid blue;
    position: relative;
    height: 100%;
    width: 100%;
}
#box p { padding: 10px; }
#box, #box:before, #box:after {
    -moz-border-radius: 15px;
    border-radius: 15px;
}
#box:before {
    border: 1px solid red;
    content: '';
    position: absolute;
    top: -7px;
    right: -7px;
    bottom: -7px;
    left: -7px;
}
#box:after {
    border: 1px solid green;
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
}
</style>

<div id="box">
    <p>Hello World!!!!<br>
       THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</p>
</div>