|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:
|Topic Started: Jun 15 2010, 09:09 PM (2,165 Views)|
|Cory||Jun 15 2010, 09:09 PM Post #1|
jQuery is an Addiction
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! Due to this being a new property that isn't quite 'standard' yet, vendor-specific properties come into play; -moz-border-radius and -webkit-border-radius is the two vendor specific properties I use primarily, due to Firefox, Safari and Google Chrome being three of the top five most used browsers.
That will produce this:
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)
This works in the top major browser latest version releases (Firefox, Google Chrome, Opera, Safari), with the exception of Internet Explorer; it will be introduced in IE9, however.
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:
Rounded Corners with Images
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.
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.
To use the version linked above on ZetaBoards, install the jQuery Corners script.
If InvisionFree users would like to use this method, both jQuery and jQuery Corners must be added to your board.
There are many, many methods used to round corners of any given element, and there are various generators available too.
|Lout-ZNR||Jun 16 2010, 05:37 AM Post #2|
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
|1 user reading this topic (1 Guest and 0 Anonymous)|
|« Previous Topic · Coding Guides · Next Topic »|