In an effort to keep posting regular content on our blog we will now be providing a Quick Tip Everyday. Whether it be HTML, CSS, jQuery or any other subject, we will now be adding useful simple snippets of code or information that we think you may find useful.

If you have any suggestions or would like to see some quick tips with a particular subject please comment below.

Quick Tip 1 – CSS3

Rounded Corners has always been a problem within website design usually resulting in multiple images to create a simple rounded box. Thanks to webkit and moz borders we can now do this, here is the code below.
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Unfortunately the solution above will only work with Firefox and Safari 3+. If you wish to have rounded corners in all browsers check out http://www.curvycorners.net/, using JavaScript it can force rounded corners in all browsers.

Related posts:

1. CSS3 Techniques
2. Quick Tip 15 – WP More Tag
3. Quick Tip 4 – CSS Resets
4. Quick Tip 9 – CSS min height
5. Quick Tip 14 – WP E-commerce

Posted By: Martyn

Hi, I'm Martyn, the Lead Designer for Web Design GM and really hope you find my existing and upcoming articles useful. Please leave comments below and I will try to respond to any questions as soon as possible.

Visit Authors Website

Tags: CSS3, Quick Tip, Rounded Corners

This entry was posted on Monday, March 1st, 2010 at 5:33 pm and is filed under Quick Tips, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.