need suggestions on jquery plugin for rounded corners

Question

I wanted to learn about jquery plugins, so I decided to try to make a simple rounded corner box. I know there are already some rounded corner plugins out there, but this is more of a learning exercise for me than a job requirement.

The rounded corners I took from here. I like this sample since it doesn't use images, it will be easy to change the color of the boxes.

I guess I'm having trouble wrapping my brain around the best way to do this. I have a very rough sample that's kind of working, but it just doesn't feel right. The part that's hanging me up is building the rounded corners around the content area. Right now it takes the "content" box and appends the corners around it. What are the better ways to do this?

Here is the call to make the box - $('#content').roundbox();

If this is not enough information let me know.

//
(function($)
{
jQuery.fn.roundbox = function(options)
{

    var opts = $.extend({}, $.fn.roundbox.defaults, options);

    var outer = $("<div>");
    var topBorder = $("<b class='xtop'><b class='xb1'></b><b class='xb2'></b><b class='xb3'></b><b class='xb4'></b></b>");
    var bottomBorder = $("<b class='xbottom'><b class='xb4'></b><b class='xb3'></b><b class='xb2'></b><b class='xb1'></b></b>");
    var title = $("<h1>Select Funding</h1>");
    var separator = $("<div></div>");

    $(this).append(title);
    $(this).append(separator);

    var firstElement = $(this).children()[0];
    if (firstElement != null)
    {
        title.insertBefore(firstElement);
        separator.insertBefore(firstElement);
    }

    outer.append(topBorder);
    outer.append($(this));
    outer.append(bottomBorder);

    $("#fundingAdminContainer").append(outer);


    //Add classes
    outer.addClass(opts.outerClass); //outer container
    $(this).addClass(opts.contentClass); //inner content
    title.addClass(opts.titleClass); //roundbox title
    separator.addClass(opts.lineClass); //line below title
};

$.fn.roundbox.defaults =
{
    outerClass: 'roundbox',
    contentClass: 'roundboxContent',
    titleClass: 'roundboxTitle',
    lineClass: 'roundboxLine'
};


})(jQuery);


//CSS
.roundbox
{
float:left;
width:400px;
margin-right:20px;
}

.roundboxContent
{
display:block;
background:#ffffff;
border:0 solid #D4E2FE;
border-width:0 1px;
height:180px;
padding:10px;
}

.roundboxLine
{
background: url(../images/fundingAdmin_line.gif);
background-repeat:no-repeat;
height:5px;
}

.roundboxTitle
{
font-size:1.3em; color:#17A2D3;
}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ffffff; border-left:1px solid #D4E2FE; border-right:1px solid #D4E2FE;}
.xb1 {margin:0 5px; background:#D4E2FE;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

Final structure of the box should be:

<div id="fundingAdminContainer"><!-- Not part of rounded box, just serves as a container. -->
    <div class="roundbox">
        <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
        <div id="content" class="roundboxContent">
            <h1 class="roundboxTitle">Title</h1>
            <div class="roundboxLine"></div>
                //CONTENT
        </div>
        <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
    </div>
</div>

Answer 1

http://www.curvycorners.net/ http://www.curvycorners.net/

javascript library, not a jQuery plugin, but it seems to work :D

Answer 2

here is an alternative jquery curved corner plugin

http://labs.parkerfox.co.uk/cornerz/

Answer 3

This one is excellent:

http://jrc.rctonline.nl/

It uses Canvas so it's very flexible.

Answer 4

The way you're doing it seems good to me. I wouldn't hardcode the Funding stuff in though.

You can make title and separator into options for the function, and instead of appending to #fundingAdminContainer, you can do

outer.insertBefore($(this));

before appending $(this) to outer.

EDIT: This answer is pretty old now, and I'd say out of date. Most browsers now support rounded corners through the CSS border-radius property or at least a browser-specific alternative. I'd also say for most cases, it's not even worth the extra js necessary to polyfill rounding corners for the old browsers that don't support the CSS (of course that's opinion). So if I were to give a full answer, I'd say just use this and do what it tells you :).

But if you really want your rounded corners in <IE9, I'd suggest something like this so that you can still use CSS alone in most browsers, and only IE has to do any extra work (in an htc file) to round the corners.

The only problem with it is that the htc file is also outdated and should be modified to check for the existence of border-radius using something like this. The htc is just JS. That would relieve IE9 of having to do the JS DOM-manipulation.