Databases
StackOverflow2013
Postsdbo
POPure CSS3 for overlapping <div> elements with border radius
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPure CSS3 for overlapping <div> elements with border radius
    text
    copied!<p>I have a varying number of <code>&lt;div&gt;</code>s inside a container <code>&lt;div&gt;</code>, that are each set to <code>display:inline-block</code>, have a <code>-webkit-border-radius</code> and some <code>padding</code>. I would like to position each of the <code>&lt;div&gt;</code>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 <code>&lt;div&gt;</code> 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).</p> <pre> ---------------- --------------------/ \ / / | | | DIV_1 | DIV_2 | LAST_DIV | \ \ | | ------------------- \ / ---------------- </pre> <p>Since the number of <code>&lt;div&gt;</code>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 <code>&lt;div&gt;</code>s that have to overlap.</p> <p>Edit:</p> <p>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 <code>left</code> 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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload