Home » Tutorials » HTML5/CSS3 » Border-radius with CSS3

Border-radius with CSS3

Border-radius with CSS3

With CSS3 you can easily give any element “rounded corners” by using the border-radius property. You can also create rounded borders and for Firefox 3.5+ you can even create elliptical borders.

For best browser support you should prefix the border-radius with -webkit- and -moz-.

.rounded-corners {
  -webkit-border-radius: 7px;  /* Safari, iOS and Android */
  -moz-border-radius: 7px; /* Firefox support */
  border-radius: 7px;
}

Let’s look a few examples:

Example1 – Simple border-radius implementation

.rounded-corners {
  -webkit-border-radius: 7px;  /* Safari, iOS and Android */
  -moz-border-radius: 7px; /* Firefox support */
  border-radius: 7px;

  background: #ed7700;
  width:110px;
  height:90px;
}

Example2 – rounded corners with borders example

.rounded-box {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #4cb2e8;
  border:3px solid #0e74aa;
  width:380px;
  height:40px;
  padding: 20px;
}
This box should have rounded corners and rounded border.

Using Rounded corners independently

Rounded corners can be created independently by defining the four individual borders for each corner.

border-top-left-radius: 10px;
border-top-right-radius: 10px 50px;
border-bottom-left-radius: 40% 5%;
border-bottom-right-radius: 10% 5%;

If only one value is supplied, this is used to define both the horizontal and vertical radii equally.
If two values are supplied, the first value defines the horizontal radii, and the second the vertical.
If one of the values is zero, the corner will be square, not rounded.

We will use the following graphic to help us understand the rounded corners calculations.

rounded corners with css3

Specify each corner separately with only one line of code

With only one value, border-radius will be the same for all four corners. But what happens if we add more values?

.rounded {
   border-radius: 4px 15px 11px 3px; /* top left, top right, bottom right, bottom left */
}

If one value is set, this radius applies to all 4 corners.
If two values are set, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner.
If three values are set, the second applies to top-right and also bottom-left.
Four values apply to the top-left, top-right, bottom-right, bottom-left corner in that order.

.three-values {
  border-radius: 15px 30px 5px;
  background: #43ca89;
  border:3px solid #000;
  width:60px;
  height:60px;
  padding: 20px;
}

Notes

  • border-radius does not apply to table elements when border-collapse is collapse
  • Old versions of WebKit can handle multiple values differently
  • Properties like -moz-border-radius-topleft: 1px; can have a space-separated value as well, like “1px 5px”.
  • The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.

Liked this? Follow us on Facebook!

With CSS3 you can easily give any element “rounded corners” by using the border-radius property. You can also create rounded borders and for Firefox 3.5+ you can even create elliptical borders. For best browser support you should prefix the border-radius with -webkit- and -moz-. Let’s look a few examples: Example1 – Simple border-radius implementation Example2 …

User Rating: 3.27 ( 3 votes)
0

Georgi Dyulgerov

Founder of fTutorials.com - the website aiming to keep you in touch with the latest technologies in the brand. Also a Freelance web developer.

Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *

*


− three = 4

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Scroll To Top
Email
Print