Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Rounded Corners
Topic Started: Jun 15 2010, 08:09 PM (2,546 Views)
Cory
Member Avatar
Coder
[ *  *  *  *  *  *  *  * ]
Rounding corners of elements has always been known to be particularly complicated and not always foolproof. There is a variety of methods used to round the corners of an element. I'm going to share the methods I have found to be most useful, and easy.

The new and easy way to round corners: CSS3 border-radius Property

CSS3 is the latest CSS specification that provides various new properties and refinements to accomplish what you previously couldn't with CSS, including the long, sought over border-radius property!
Code:
 
td.c_user dl {
border-radius: 10px;
}
That will produce this:

Posted Image

Instead of using different properties for different edges (border-top-left-radius, for instance), I'd personally stick with the shorthand properties to produce less CSS, which also reduces the file size of your CSS.

4 values: Top-Left Top-Right Bottom-Right Bottom-Left (10px 20px 30px 40px)
3 values: Top-Left Top-Right, Bottom-Left Bottom-Right (10px 20px 30px)
2 values: Top-Left, Bottom-Right Top-Right, Bottom-Left (10px 20px)
1 value: Top-Left, Top-Right, Bottom-Right, Bottom-Left (10px)

When border-collapse: collapse; is applied to the table element to properly collapse single borders, the border radius will not be applied, so we have to setup separate selectors to properly style these affected tables, like so:
Code:
 
#member_list_full thead th {
border-radius: 20px 20px 0 0;
}

#member_list_full {
border-collapse: separate;
}

#member_list_full td + td {
border-left: 0;
}

#member_list_full tr td {
border-top: 0;
}
Rounded Corners with Images

This method is fully described here by Paul O'B, a CSS expert. You're able to produce transparent rounded corners so the background color or background image won't appear where the corner is rounded as it normally would, this is particularly good if you have a background image applied under the element. This technique is best used for elements you manually add to your board, otherwise JavaScript would be involved to modify existing elements. You'll probably find this method most useful for applying a border around your board if you have a background image behind it; if no background image is applied and the body is only a solid color, then you may find this method (InvisionFree version) useful, coloring the background of the corner images the same as the body background.

A particular method I've used is previewed here. It's a full image border that requires eight different pieces. You can view the source of the page to see what HTML and CSS is involved. Just a forewarning, a lot of positioning is required.

jQuery Corners

ZetaBoards has jQuery and a similar jQuery Corners script installed by default; that's how the corners in the blogs are rounded. The details are described here, and it essentially has unlimited possibilities to rounding corners. Even though I find this method somewhat messy in a sense, it does the trick and it is very straightforward.

Other Methods

There are many, many methods used to round corners of any given element, and there are various generators available too.

Most CSS-only and JavaScript methods are easiest to use on InvisionFree and ZetaBoards because additional markup requires modifications to the default source code, which often involves JavaScript.
Edited by Cory, Jul 19 2013, 06:37 AM.
Offline Profile Quote Post Goto Top
 
Lout-ZNR
Member Avatar
He came, he saw...
[ *  *  * ]
Great guide Cory, I actually spent a few days creating a theme with rounded corners all over the place using the CSS method but didn't check it in IE.

You can imagine my horror when I'd finally finished the theme and then did decide to look at it in IE :(
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding Guides · Next Topic »
Add Reply