JQuery round corner merging divs

Question

Does anyone know if there is any plugin which does round corners but do it to several elements giving the impression they are joined and rounded like shown here - specifically, I want inside corners rounded as well as outside corners.

The black outline represents the element`s limits and the blue the final result.

I have edited the image so it is clearer what I mean.

Answer 1

You can do this with any rounded-corners plugin, if you know in advance which elements you want to have rounded corners!

If the divs are adjacent in the markup, you should be able to do this using jQuery's :first-child and :last-child selectors. If you have a more complicated structure, you might need to mark specific corners as the ones that need rounding.

Answer 2

As far as I understand, you want to style the first and the last element in your selection and make them rounded. Anything in between should be left unrounded. Right?

So, something like this jQuery-snippet should do what you want.

$("myDivs").first().css({
    "border-top-left-radius": "2px",
    "border-bottom-left-radius": "2px"
}.end().last().css({
    "border-top-right-radius": "2px",
    "border-bottom-right-radius": "2px"
}

For clarity: end() returns to the selector $("myDivs") after the previous call of first, allowing to select the last element now.

Answer 3

You want the jQuery Corner plugin. It says

Use top , bottom , left , right , tl , tr , bl , br to identify which corner to style

Here's how you would do what you described:

<script type="text/javascript">
    $("#element-1").corner("left");
    $("#element-2").corner("right");
</script>

<div id="element-1" style="float:left"></div>
<div id="element-2" style="float:right"></div>

You can download it here .