Pure CSS3 for overlapping <div> elements with border radius

Question

I have a varying number of <div>s inside a container <div>, that are each set to display:inline-block, have a -webkit-border-radius and some padding. I would like to position each of the <div>s in a way that the one to the right overlaps the one to the left enough, so that there is no break in the border on top and bottom. Also, Ideally the container <div> would only have a width that is exactly the size of the styled divs inside (hight of LAST_DIV and width equal to the distance from the leftmost to the rightmost div).

                         ----------------
   --------------------/                  \
 /          /         |                    |
|    DIV_1 |    DIV_2 |    LAST_DIV        |
 \          \         |                    |
   ------------------- \                  /
                         ----------------

Since the number of <div>s that will display varies, I ruled out absolute positioning. I would like to refrain from javascript or adding additional elements to the html document, since I am creating multiple styles for the same website element, and some of those styles might not have rounded <div>s that have to overlap.

Edit:

I have tried setting only a border radius to the left edge of the inner divs and giving the container div a border on top and bottom and setting a negative value for left until the overlapping border of the container div disappears. When all divs are the same hight, this gave me issues at the right end, since the container div now extended over the right end. This also gave me issues when the individual divs had different colors.

Please add code to your question, too, so we know what you're working with and don't have to start from scratch. — sachleen

Ana Ana · Accepted Answer · 2013-01-24T01:55:16

You could try it something like this:

demo

HTML:

<div class='container'>
    <div>DIV_1</div><!--
    --><div>DIV_2</div><!--
    --><div>LAST_DIV</div>
</div>

Relevant CSS:

.container, .container div { display: inline-block; }
.container div {
    padding: .25em 1.25em;
    border-radius: .65em 0 0 .65em;
}
.container div:not(:first-child) {
    margin: 0 0 0 -.65em; /* negative left margin, same value as border-radius */
}
.container div:last-child {
    padding: 1.25em;
    border-radius: .65em;
}

Note

Any kind of whitespace (space, tab, newline) between elements that have display: inline-block; set on them matters. This mean that a newline in the HTML between the divs in the container will introduce a space between them. There are a few fixes for this. The one I've chosen involves adding a comment between </div> (closing tag of a child div) and <div> (opening tag of the following div).

Pure CSS3 for overlapping <div> elements with border radius

1 Answers

demo

Note