Boxes and Tables with Rounded Corners

Posted by RobElliott on 24 Feb 2009 10:43, last edited by James Kanjo on 09 May 2010 05:32

Tags: box boxes corner css elastic expandable how-to rounded table tables

rating: +14+x

What we are trying to achieve

One of the features of CSS3 is the ability for users of Firefox and Safari to see boxes and tables with rounded corners without the developer using lots of CSS.

roundedcorners.png

This solution has an elastic CSS layout so that both the header and main content expand or contract (in height, not width) depending on the text you enter.

This solution just uses a small amount of CSS and some wiki syntax using divs.

For the CSS for tables with rounded corners please see the comments further down the page.

How to do this

CSS

The CSS properties that provide the rounded corners are as follows:

Firefox
-moz-border-radius: values;

Safari
-webkit-border-radius: values

In your custom CSS add the following CSS code. As always you can change the background and text colours to blend in with your site.

.box-container {
    height: auto;
    width: 350px;
    float: left;
    padding:35px;
}

.box-header h2 {
    background: #DDDDDD;
    border: 1px solid #ccc;
    padding: 10px 15px;
    -moz-border-radius: 2em 0;
    -webkit-border-radius: 10px;
    margin:-15px;
    padding-top: 15px;
    padding-left: 15px;
    width: 333px;
    border-left-width: 0px; 
    border-top-width: 0px;
    color: #468259;    
}

.box {
    background: #D8E7EC;
    border: 1px solid #ccc;
    padding: 15px;
    -moz-border-radius: 2em 0;
    -webkit-border-radius: 10px;
    width: 333px;
}

Wiki syntax

Then in your wiki page you need to enter some divs to hold the header and content boxes and your text. You will see that in this example I have added the header box inside the box which will contain the content text in order to achieve the effect I wanted.

[[div class="box-container"]]

[[div class="box"]]
[[div class="box-header"]]
++  Your header text
[[/div]]

Your content text

[[/div]]
[[/div]]

Make sure you use the ++ h2 syntax for the header or the header text won't render properly. In an update to this how to I will provide an alternative that doesn't limit you to using the h2 header.

Corner styles

By changing the -moz-border-radius: 2em 0; line in your CSS you can change the style of the corners

Internet Explorer

This solution works for users with Firefox 3 and Safari but not with Internet Explorer. IE users will see a square header and content box which still expands depending on the content.

roundedcornersIE.png

Links

http://www.the-art-of-web.com/css/border-radius/
http://community.wikidot.com/howto:design-your-own-css-theme

Author

RobElliottRobElliott. Please visit his/her userPage.

Rate this solution

If you think this solution is useful, please increase the rating.

rating: +14+x

Add a New Comment

Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.