Rounded corners

Rounded corners

The border-radius property is the best way to achieve rounded corners on objects...

As most browsers have adopted the border-radius property, it is the best way to achieve rounded corners on objects, and much easier than using lots of tiny images as was once the best option.

For example:

.round { 
  border-radius: 5px; 
}

.round-bottom { 
  border-bottom-left-radius: 10px; 
  border-bottom-right-radius: 10px;
}

.round-top { 
  border-top-left-radius: 10px; 
  border-top-right-radius: 10px;
}

What about Internet Explorer?

Internet Explorer 9 includes support for rounded borders, but as it has not been out for long and will not run on Windows XP, I would not rely on the border-radius (without prefixes) attribute for IE. Sometimes I wish we could allow IEĀ users to view our sites with all the quirks intact, so that they begin to understand what a bane of our existence IE really is. But whilst IE is still the world’s most popular browser, and corporations take decades to update their copies of it, it is important to ensure that websites look correct in versions 7, 8, and 9 (and 6 to a lesser extent) of Internet Explorer.

Please recommend us if you found this article helpful:
Anthony Luxton
Author
Anthony Luxton
Director

Published:
18th August, 2011

Infographics

5 reasons why you need a website
Android usage – Medina Valley Centre
Website success benchmark
View all

Interviews

Interview with Mr Tom Fallick
Interview with Samuel Claxon
Interview with Anthony Luxton
View all

iPad Web Design

Responsive web design example
iPad Javascript hover
Introduction to iPad development
View all

Marketing

Why you should run an e-mail campaign
View all

Print

The intricacies of preparing for print
View all

Search Engine Optimisation

Getting started in guest blogging
Website recommendations for 2013
The importance of site structure for SEO
View all

Web Development Tips & Tricks

Youtube iframe API player undefined Firefox
Show and hide input password field
Pixel-perfect webpages with just CSS
View all

You and Your Website

LinkedIn For Business
How much content is enough?
How often should I update my blog?
View all