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

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.

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.