Box with multiple borders

I am trying 开发者_开发问答to code and style a box which will contain a post. My problem is with multiple borders (i guess), trying to find the best way to code this, i prefer semantic HTML5 and CSS3, but if there is no other way, i can do "old style" with 3 divs (top, center, bottom) with css background: url..., can anyone give me some lights please?

If you please check the following url, you can check what i need to accomplish.

http://dl.dropbox.com/u/3696224/postBox.jpg

If you notice it has:

• one border around all the box with a dark gray (#cccccc); (border)
• a small space between that border and other light gray (#f7f7f7), almost white;
• and only then the content with a white background;

Any suggestions? Very sorry for English grammar, thanks in advance.

Regards

PS - I almost forgot, i don't know is if needed or not, but the all around the box i have a box-shadow (i know how to do this part)

You only need 2 different <div> elements; one for each border that you want.

HTML

<div class="outer">
    <div class="inner">
        CONTENT
    </div>
</div>

CSS

/* colors sampled from image linked in OP */

.outer {
    border: 1px solid #C8C8C8;
    box-shadow: 3px 3px 4px #000;
}

.inner {
    background-color: #FFF;
    border: 5px solid #F8F8F8;
    color: #595959;
    padding: 50px;
    text-align: center;
}

z0mg demo →

Here's a solution using no messy markup. See this in action at http://jsfiddle.net/7xGKk/.

This should work properly in Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+ and Internet Explorer 8+. Others will get a 7px outside-colour border; if you wished to change the colour of the three selected you could remove the .fancyframe background-color and modify z-indicies, e.g. to make #f7f7f7 the border.

This plays nicely with box-shadow etc; the border is contained inside the div.

HTML:

<div class="fancyframe">content</div>

CSS:

.fancyframe {
    background-color: white;
    border: 7px solid #cccccc;
    position: relative;
    /* The rest of this block is purely stylistic to make it look precisely
       like the original image except for font. */
    padding: 50px;
    text-align: center;
    text-transform: uppercase;
    line-height: 4em;
    font-size: 50px;
    width: 492px;
    font-family: Impact, sans-serif;
    color: #595959;
}
.fancyframe:before {
    content: "";
    margin: -6px;
    position: absolute;
    border: 6px solid #ffffff;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.fancyframe:after {
    content: "";
    margin: -5px;
    position: absolute;
    border: 5px solid #f8f8f8;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

You can use -moz-border-top-colors property for the same. I tested this on Mozilla and it works You can play with the code at given link.

div{
    width:300px;
    height:300px;
    border-top:10px solid red;
   
-moz-border-top-colors: red red red green green green yellow yellow;

    
}

<div></div>

.postcbox {
  border: 1px #ccc solid;
  background-color: #f7f7f7;
}

.postbox {
  background-color: white;
}


<div class="postcbox">
  <div class="postbox">

  </div>
</div>

You can use box-shadow property, the good thing about box-shadow is that we can have as many of them as we want, comma separated:

box-shadow:0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px; rgba(0,0,0,.6);

JSFiddle