Rounded Corners

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:

Rounded Corners
Topic Started: Jun 15 2010, 09:09 PM (2,165 Views)
Cory	Jun 15 2010, 09:09 PM Post #1
jQuery is an Addiction Posts: 11,303 Group: Members Member #44,593 Joined: February 12, 2005 I'm Browsing With Firefox	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. Code: `td.c_user dl { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }` 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: Code: `#member_list_full thead th { -moz-border-radius: 20px 20px 0 0; -webkit-border-radius: 20px 20px 0 0; 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. To use the version linked above on ZetaBoards, install the jQuery Corners script. Admin CP Themes Board Template Javascripts Code: `<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>` If InvisionFree users would like to use this method, both jQuery and jQuery Corners must be added to your board. Admin CP Skinning & Styles Board Wrappers Javascript Code: `<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>` 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.



Lout-ZNR	Jun 16 2010, 05:37 AM Post #2
He came, he saw... Posts: 466 Group: Members Member #363,285 Joined: January 1, 2009	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 »