Although not supported by older or mobile browsers, most modern browsers support the border-radius property: Internet Explorer 9+, Chrome 5+, Safari 5+, Opera 10.5+ and Firefox 4+. For the pure CSS rounded corners on older versions of Firefox, Chrome and Safari we're going to have to introduce some browser specific properties which we get to later. The CSS3 border-radius property allows for easy implementation of rounded corners as design elements without the need for corner images, Javascript or the use of complex layered DIV tags. From the perspective of a web designer there have been few advancements in CSS that have made development so much easier.
Like other CSS properties for margins, padding and borders, border-radius can be created independently using the four individual properties:
border-bottom-left-radius: *px;
border-top-left-radius: *px;
border-bottom-right-radius: *px;
border-top-right-radius: *px;
Or for all four corners using the shorthand method for the border-radius property:
border-radius: *px;
border-radius: *px *px *px *px;
The rounded corners on this box were created using the following border-radius
- border: 1px solid #000000;
- border-radius: 0px 20px 0px 20px;
The first set of values define the horizontal radii for each corner: these represent the top-left, top-right, bottom-right and bottom-left radii respectively. Optionally you can add a second set of values by following the first set with a "/". This second set will define the vertical radii for each corner. If only one set is supplied, they will be used to set both the vertical and horizontal radii equally, such as in the example above. As you can see from the example below the corners are not symmetrical, but instead skewed
The rounded corners on this box were created using the following border-radius
- border: 1px solid #000000;
- border-radius: 60px 60px 60px 60px / 10px 10px 10px 10px;
Here we introduce -moz-border-radius and -webkit-border-radius. These two properties are browser specific and can be applied for better compatibility with older Safari, Firefox, Chrome and mobile browsers. The individual properties can be written and work the same as the CSS3 border-radius. The following is an example of how all three properties work together for better browser support.
The rounded corners on this box were created using the following border-radius
- border: 1px solid #000000;
- border-radius: 20px;
- -webkit-border-radius: 20px;
- -moz-border-radius: 15px;
If you have a question about rounded corners and the use of border-radius leave us a comment and we will see if we can answer it for you. As a web design company in Shenzhen, China, we are always looking to support and engage the developer community, so we will be happy to answer answer any questions you might have.
Let's get into contact so you learn more about us and we can create solutions for you!