CSS3 double rounded border, is it possible without 2 divs?

Question

I was wondering if it was possible to create a double rounded border without nesting DIV's?

See my example here: http://jsfiddle.net/eXDjL/

The first box is rounded, but the ouline stays square, the second box has no rounded corners but shows the borders how I want them.

I know there is a -moz-outline-radius property, but anything for the other browsers?

If not I guess I'll just stick with two divs.

I've seen you can use 'box-shadow', giving it a go now – Adam Jul 03 '12 at 14:58 — Adam, Jul 03 '12 at 14:58

score 1 · Accepted Answer · answered Jul 03 '12 at 15:02

1

To mimic different color borders you can use box-shadow - http://jsfiddle.net/eXDjL/3/

.genyx_content_full {
    background-color:#f7f7f7;
    border: #fff 1px solid;
    padding: 10px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    box-shadow: 0px 0px 0px 1px #dedede;
}

answered Jul 03 '12 at 15:02

Zoltan Toth

46,981
12
120
134

The `box-shadow` property is supported in IE9+, Firefox 4+, Chrome, Opera, and Safari 5+. To be safe you might want to list the rule with the browser specific prefixes, i.e. `-moz`, `-webkit`, `-ms`.. – Zoltan Toth Jul 03 '12 at 15:18

CSS3 double rounded border, is it possible without 2 divs?

1 Answers1

Linked