Your Customers are Mobile, you will be too …

In this quick tip I will show you how to create unevenly corners on a CSS3 HTML element. There is a lot of information out there on how to create evenly rounded corners but not a lot on how to create a more elongated rounded effect on our corners.

CSS3: Uneven Rounded Corners

Unevenly rounded corners only works on the following CSS3 rules:

  • border-top-left-radius
  • border-bottom-left-radius
  • border-top-right-radius
  • border-bottom-right-radius

This is because we need to apply two measurements to the one corner. Entering two measurements through the other corner radius rules will try to apply the measurements to other corners.

The first measurement we use is the width of the corner, with the second being the height of the radius.
So border-top-left-radius: 200px 20px; would create a corner that is rounded off 200 pixels across the top left corner of the CSS element and 20 pixels in height.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: