in CSS Basics

CSS Rounded Corners

CSS allows you to add border to your elements but they are purely just straight lines and right angle corners, which doesn’t always look the best on websites so what people used to do is create a rounded corner image in Photoshop chop it up and use them as either a top and bottom images or each corner has it’s own image. With the new CSS features which personally is my favourite out of the new features is you can now add rounded corners to your HTML elements.

One of the most annoying tasks was to add rounded corners with images to divs and to get them to line up perfectly with the rest of the border in all the different browsers. Now thanks to CSS3 you can create rounded corners so quickly in any shape and size.

You are able to change the corners to rounded corners by changing the border radius. Like many other CSS attributes you can pick to have it on all corners with one simple line or specific corners or different on each corners. For example if you want to change all corners you use:

.rounded {
     -moz-border-radius: 10px;
## CSS Rounded Corners Example

But you are able to to select any corner of the box by using any of these.

     border-top-right-radius: 25px;
     border-top-left-radius: 25px;
     border-bottom-left-radius: 25px;
     border-bottom-right-radius: 25px;
## CSS Rounded Corners Example

Use can customize the radius even more by using two values on the border-radius. The first value is is for the horizontal of the radius and the second radius is for the vertical value of the radius.

     border-top-right-radius: 20px 5px;
     border-top-left-radius: 20px 5px;
     border-bottom-left-radius: 5px 20px;
     border-bottom-right-radius: 5px 20px;
CSS Rounded Corners Example

Subscribe To The Weekly Newsletter

Get weekly updates to your email