Ihsen Consulting

The Ultimate Rounded-Corner Panels

How do they work?

- All panels use a single anti-aliased background image to render the panel colour (see Panels 1 & 2) or the border lines (see Panel 3).
- The CSS (see below) is common to all panels so that changing the colour is achieved through changing the background image only.
- The panels use a minimum height and will expand vertically as the content changes.
- Most importantly, the panels work in both Mozilla and Internet Explorer 7 & 8.

Panel 1

This panel uses the RoundedCornersColour1.gif image as the background colour. There is no minimum height set, so the panel will expand infinitely from a base minimum of 60px as the content grows.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Add your content here…

</div>

</div>

Panel 2

This panel uses the RoundedCornersColour2.gif image as the background colour. Notice that the Colour2Panel determines the background image according to the CSS code (see below). This panel has a minimum height of 300px (see HTML code) set that will expand with extra content. The panel has also been set at a fixed width of 350px (see HTML code).

Add your content here…

</div>

</div>

Panel 3

This panel uses the RoundedCornersGreyLines.gif image as the background image. It also uses a different CSS class for the content panel. Otherwise it works the same way as Panels 1 & 2.

Add your content here…

</div>

</div>

Complete CSS

The CSS is complete and will work for all panels. Tweaking the CSS code might be required for changing the margin sizes or the rounded corner sizes.

/******** rounded div styles ********/

DIV.RoundedPanelContainer {float:left; height:auto; width:100%; margin-bottom:20px; background-position:center;}

DIV.RoundedPanelTopBottom{float:left; width:50%; min-height:20px; background-repeat:no-repeat;}

DIV.RoundedPanelContent {float:left; margin-left:20px; margin-right:20px; min-height:0px; min-width:50%;}

DIV.RoundedPanelTopLeft {background-position:left top;}

DIV.RoundedPanelTopRight {background-position:right top;}

DIV.RoundedPanelBottomLeft {background-position:left bottom;}

DIV.RoundedPanelBottomRight {background-position:right bottom;}

DIV.Colour1Panel {background-image:url(../Images/Backgrounds/RoundedCornersColour1.gif);}

DIV.Colour2Panel {background-image:url(../Images/Backgrounds/RoundedCornersColour2.gif);}

DIV.GreyLinesPanel {background-image:url(../Images/Backgrounds/RoundedCornersGreyLines.gif);}

DIV.RoundedPanelContentGreyLines {padding-left:20px; padding-right:20px; min-height:0px; border:solid 1px #ADADAD; border-top:0px; border-bottom:0px;}

Background Images

These background images use a 20px rounded corner, but it is possible to use smaller or larger rounded corners (you may need to alter the CSS code to suit different rounded corner sizes). Note that the images here examples only and are based on a white background using anti-aliasing for the best presentation.

Download the RoundedPanelCorners.psd (zipped) file

(Example images are based on a white background only)