Playing With Border-Radius


Playing With Border Radius

Websites are made out of squares. Every paragraph, picture, icon or button is a square. Even circles are squares. Until CSS3 came around, developers had to find little workarounds to make these squares look less square-y. This included everything from using background-images to .htc files. Rounding corners on squares has been the bane of the online existence since Apple MacIntosh. Apple had to develop a brand new algorithm just to figure out the math behind rounding corners. It really was that complicated.

Thankfully, now it's pretty easy!

Introducing Border-Radius!

Contrary to the name, border-radius has nothing to do with the border or the radius of the element. Instead, it controls the curvature of the corners. Let's say we have a simple 300px by 300px blue box:

If we wanted to give it rounded corners, we'd need to give it a border-radius. Let's give it a border-radius of 50px.

Our box has some curves! Now what if we use percentage instead?

Now our box is a circle! 50% border-radius has that effect on any element, as long as the width and height are equal. If they aren't equal the element becomes an oval.

border-radius 50% is a good short-cut for rounding square elements. It would make sense then that we need to use half the actual dimension as a border-radius to make the element a circle. Let's try it.

Ew. That's not right. What did we do wrong?

Breaking Down Border-Radius

border-radius takes 4 values:

  1. If there's 1 value, it applies to all four corners.
  2. If there's 2 values, it applies to the top-left and bottom-right corners, and the top-right and bottom-left corners.
  3. If there's 3 values, it applies to the top-left corner, the top-right and bottom-left corner, and the bottom-right corner.
  4. If there's 4 values, it applies to the top-left corner, the top-right corner, the bottom-right corner and the bottom-left corner.
  • Confused? Here's a demo:

    Getting Funky

    border-radius effects two sides to each corner, and our earlier example change both of those corners by the same value. What if we want one side of the corner to be different than the other? Here's a demo:

    This syntax is a little unique. The values before the slash tells one side of the corner to do something, while the values after the slash tell it to do something else. In this case we are doing the following:

    • The top top-left corner is 100px, while the left top-left corner is 50px
    • The top top-right corner is 100px, while the right top-right corner is 50px
    • The top bottom-right corner is 100px, while the right bottom-right corner is 50px
    • The top right-left corner is 100px, while the left right-left corner is 50px

    It can be mind boggling, so here is a graphic to assist you:

    Border radius break-down

    If you did something like this, how would it look?

    Kind of goofy, but it works!

    Fail-Safe

    Let's say you have a box that is 400px by 400px and you gave it a 300px border-radius (which is more than 50%). What would happen then? Would the element collapse on itself and make a black-hole?

    It just becomes a circle. Okay, what if we made the border border-radius 800px (twice the size of the element)?

    It's still a circle. If your border-radius is larger than 50% of the dimensions of the box, it will just produce a circle. Who knew!?

    Do you have anything else to add about border-radius? Tell me about it in the comment below!

  • Sign-up for inside tips for making
    your website more beautiful!

    * indicates required

    Close

    Sign-up for inside tips for making
    your website more beautiful!

    * indicates required

    Close