After spending lots of time making round corners for my containers using God knows how many small images, html tags and css classes I found out that I could easily ditch all that with just a bit of jQuery magic! It is important to note that this is a cross-browser solution – your browser doesn’t have to support any rounded corner CSS properties, so it works even on Internet Explorer 6.

What you will need.

If you have DNN version 5.0 or greater then you already have jQuery ready and you will only need the jQuery Corner plugin (jquery.corner.js) . You can download it from here: http://www.malsup.com/jquery/corner/ .

Including the plugin

In your Skin file, include the jquery.corner.js file by adding this line:

<script src="http://github.com/malsup/corner/raw/master/jquery.corner.js"  type="text/javascript" charset="utf-8"></script>

or better if you have copied the file to your skin’s path  (e.g. in the scripts folder)

<script src="<%=SkinPath%>/scripts/jquery.corner.js" type="text/javascript" charset="utf-8"></script>

Making the Container

And now for any container you want to have rounded corners you just have to add this line at the end of your container code :

<script type="text/javascript">
 $('.panel').corner();
</script>

where .panel is the name of the div that you want to make its corners rounded.
You can see much more options by using some parameters here:
http://www.malsup.com/jquery/corner/

A complete container example:

<%@ Control language="vb" CodeBehind="~/admin/Containers/container.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Containers.Container" %>
<%@ Register TagPrefix="dnn" TagName="ACTIONS" Src="~/Admin/Containers/Actions.ascx" %>
<%@ Register TagPrefix="dnn" TagName="ICON" Src="~/Admin/Containers/Icon.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TITLE" Src="~/Admin/Containers/Title.ascx" %>
<%@ Register TagPrefix="dnn" TagName="VISIBILITY" Src="~/Admin/Containers/Visibility.ascx" %>

<div class="panel">
  <h2> <dnn:ACTIONS runat="server" id="dnnACTIONS" /> <dnn:TITLE runat="server" id="dnnTITLE" CssClass="" /></h2>
  <div  id="ContentPane" runat="server"></div>
 </div>
<script type="text/javascript">
 $('.panel').corner();
</script>

And that’s it! No-images cross-browser rounded corners!