More with border-radius

The border-radius command can be used in many different ways. Using a single value creates rounded corners of the same size, but the property can also be used with different values for each corner, allowing you to create Tabs or other interesting shapes.

The syntax for creating corners of different sizes, can be complex, but there is a shorthand version, which I always use instead. The order of the corners starts with the top-left corner and moves clockwise, ending with bottom-left.

/* I'm adding "px" after 0 so it's easy to change values, but it's not needed for 0 */
-moz-border-radius: 20px 20px 0px 0px;
-webkit-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;


Creating other shapes is just as simple. You can make any of the 4 corners rounded and with unique values.

.opposite { 
  width: 100px; height: 100px;
  background-color: #A0DE21; 
  -moz-border-radius: 20px 0px 20px 0px;
  -webkit-border-radius: 20px 0px 20px 0px;
  border-radius: 20px 0px 20px 0px;

If you take the rounded corner to the extreme, you can create a leaf shape. Also, note the shorthand. When both sets of opposite corners have the same values, you only have to type 2 numbers once. (‘100px 0’, instead of ‘100px 0 100px 0’.)

.leaf { 
  width: 100px; height: 100px;
  background-color: #A0DE21; 
  -moz-border-radius: 100px 0px;
  -webkit-border-radius: 100px 0px;
  border-radius: 100px 0px;

Finally, you can make every corner have a different value, creating unique shapes.

.odd { 
  width: 100px; height: 100px;
  background-color: #A0DE21; 
  -moz-border-radius: 50px 30px 10px 0px;
  -webkit-border-radius: 50px 30px 10px 0px;
  border-radius: 50px 30px 10px 0px;

2 thoughts on “More with border-radius

  1. You can also make a perfect circle with code like this.

    .circle {

    And to centre a line of text in the middle add the following :


Leave a Reply to Phil Hill Cancel reply

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