Current Version: 2016-04-10
Need a hand? Join the community.

How To Make Rounded Corners

This article is here for historical purposely only. With the prevalence of browser support for the CSS 3 border-radius property, using any of the methods below is unnecessary.

There are several ways of creating rounded corners in html. One approach is to use images with rounded corners, but you can also produce rounded corners with just html and css without using any images. There are examples of both approaches in the skins included with mojoPortal.

Using Images for Rounded Corners

Some example skins included with mojoPortal that use images for corner rounding are:

  • graformix-orange
  • graformix-company
  • freecsstemplates-level2
  • mmcgee-uncreativesuite
  • styleshout-refresh, styleshout-coolwater, styleshout-envision uses images only for rounding the outer container

Rounded Corners Without Images

The technique for rounded corners without images used in mojoPortal is based on Nifty Corners by Alessandro Fulciniti. Example skins which use this approach are:

  • dcarter-businessone
  • dcarter-sq2
  • dcarter-ticktockpro
  • mitchinson-earthy
  • mitchinson-earthy-alt1
  • ramblingsoul-5contentpanes
  • ramblingsoul-colorpencils
  • snop-plasticboy-reflection
  • viktorpersson-thehobbit

Since this technique requires some additional html elements that are used to produce the rounding, most pages/features in mojoPortal include an ASP.NET server control that  I developed in order to inject the needed markup for corner rounding, so in the .ascx and .aspx files you will see this at the top:

<mp:CornerRounderTop id="ctop1" runat="server" EnableViewState="false" />

and this at the bottom

<mp:CornerRounderBottom id="cbottom1" runat="server" EnableViewState="false" />

When these render, they produce the needed markup in the page so css can be applied to it, its reall just some extra div elements, the top renders like this:

<div class='rtop'><div class='r1'></div><div class='r2'></div><div class='r3'></div><div class='r4'></div></div>

and the bottom like this:

<div class='rbottom'><div class='r4'></div><div class='r3'></div><div class='r2'></div><div class='r1'></div></div>

and csslike this is applied to produce the rounded corner effect:

.rtop, .rbottom{display: block;}
.rtop, .rbottom{background: #E4DCB2;}
.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4{background: #9C9473;}
.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4
{ display: block;height: 1px;overflow: hidden; }
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.rtop .r4, .rbottom .r4{ margin: 0 1px; height: 2px }
.rbottom { margin-bottom:10px; }

The same dvis may also be used to hang the images needed for image based corner rounding, but the css will be much different for that.

Can I Get Rid of the Extra divs if I'm not using Corner Rounding?

Yes, the extra unsemantic divs are a trade off that helps achieve a design goal but they are not needed if the skin is not using corner rounding of any kind and it may be desireable to have cleaner markup without those extra divs. This can be done easily using the file included with the skin. You will notice that if you look in the skins that do not do corner rounding, they have this in the file:

<mp:CornerRounderTop runat="server" DoRounding="false" />
<mp:CornerRounderBottom runat="server" DoRounding="false" />

These settings just tell those controls not to render at all, so no extra markup is added to the page. Note however that if you are hosted in Medium Trust, the file in the skin folder is not used because our Virtual Path Provider cannot work in Medium Trust, so in this case it uses the file from App_Themes/default/. If hosting multiple sites in one installation under medium trust this same file is used for all sites, so if some sites need the corner rounding and others don't there is no way to disable it at the site level, so you must just let it render the extra divs for skins wiothout corner rounding in order for it to work with the ones that do use it.