Quick Tip – CSS3 Rounded Borders
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:
- CSS3 Techniques
- Quick Tip 15 – WP More Tag
- Quick Tip 4 – CSS Resets
- Quick Tip 5 – Compact CSS
- Quick Tip 9 – CSS min height
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.
