CSS3 Border Radius
In the specification for CSS3, border-radius was added, a great new feature that allows rounded corners to be set for elements in our document. This visual effect has been used for many years by web designers, but had to be achieved by using images, background images and a variety of complicated, unnecessary elements in our markup to achieve the same or lesser aesthetic that border-radius gives us.
These previous methods bloated the markup and obviously impacted on page load speed, increasing the amount of images on a page, not to mention unnecessary amounts of markup, mainly div’s. This is why the implementation of border-radius in CSS3 has been so welcomed, giving the user and developer more control, ease and speed.
How to Implement Border Radius in CSS3
The border-radius property is part of the background and borders module of the CSS3 specification. The following syntax will add equal, 10px rounded corners to the element in with the id; example (#example), to demonstrate the most basic level of implementation.
#example {
width: 100px;
height: 50px;
float: left;
border-radius: 10px;
}
The example above has an element with the border radius of 10px which means each corner is equally rounded. If you required varying border radius dimensions, then the example below shows you how.
#example {
width: 100px;
height: 50px;
float: left;
border-radius: 20px 15px 10px 5px;
}
The example above specifies an individual value for each corner, with the rounded corners specified in the following order; border left top radius (20px in the example), border right top radius (15px in the example), border right bottom radius (10px in the example) and finally border left bottom radius (5px in the example). This is the only order in which the syntax can specify the border radius.
Browser Prefixes for Border Radius
The user base for your site may not being using a version of the browser that has the functionality correctly implemented for border radius and will require a vendor prefix adding beforehand as in the example below.
#example {
width: 100px;
height: 50px;
float: left;
border-radius: 20px 15px 10px 5px;
-webkit-border-radius: 20px 15px 10px 5px;
-moz-border-radius: 20px 15px 10px 5px;
}
The vendor prefixes for Mozilla based browsers including FireFox is ‘-moz-‘, for WebKit based browsers such as Safari, Chrome and now Opera ‘-webkit-‘ is used and for older versions of Opera the vendor prefix is ‘-o-‘. Vendor prefixes are used during the implementation phases of browser builds and once a vendor is happy that the functionality and front end rendering is correct, it will remove the requirements of a vendor prefix in the next build version of the browser. Further resources relating to vendor prefix reuirements can be found here: http://css3clickchart.com/#border-radius.
Browser Support
As you may be aware the issue with using the latest and emerging technologies when developing online, is that users accessing your site with older browser versions will have issues and no support for them. This is the case with border radius in the CSS3 specification that was obviously released after the browser was.
The support for border radius without vendor prefixes in mainstream, most commonly used browsers is; Internet Explorer 9 upwards (IE9), FireFox 4.0 upwards, Chrome 5.0 upwards, Safari 5.0 upwards and Opera 10.5 upwards.
The browser support for border radius in the most commonly used mobile browsers without vendor prefixes is as follows; iOS Safari 4.0 upwards, Android Browser 2.2 upwards, BlackBerry browser 7.0 upwards, Opera Mobile 11.0 upwards, Chrome for Android and iOS version 25 upwards and FireFox for Android version 19.0 upwards.
For more information regarding browser support for border-radius, along with browser versions that have support but require vendor prefix on mobile and desktop platforms, please see the following guide: http://caniuse.com/#feat=border-radius.
IE CSS3 Fix
With any web site that you are developing or updating and plan to use the latest or emerging technologies on, its key to study you Analytics and know your user base. As with many sites, there will always be a large amount of visitors that have dated browsers and in the most part this will be Internet Explorer (IE) users. Internet Explorer 8, 7 and 6 (IE8, IE7 and IE6) are still used to access the internet by Windows XP users who can only upgrade to a maximum of IE8.
Web Developers know this problem all too well, so ensuring that these visitors don’t lose out on any functionality of a web site is key. Rounding a few corners with border radius may only be an aesthetic enhancement and not distract from your sites usability or overall look, but if you do want people using older versions of Internet Explorer to have rounded corners, there is a solution.
CSS3 Pie is a javascript that can mimic border radius for IE users that don’t have support and can be downloaded here: http://css3pie.com/. I have used the jQuery version on a few of my clients sites and it works well, also adding CSS3 support for other properties such as box shadow.
When using this solution as mentioned I have used the js version, but added the following statement around the script to only include it for users of IE8 and below.
<!--[if lt IE 9]>
<script type="text/javascript" src="PIE_IE678.js"></script>
<![endif]-->
Using the ‘if less than IE9’ statement around the script ensures that other users with other browsers aren’t downloading unnecessary files, impacting on page load speeds and http requests.
All Rights Reserved © Mathew Porter 2024
