CSS border-radius | code example

 

Live example of CSS border radius properties, horizontal radii  /  vertical radii, border-radius on an image, one-side rounded corners and border-radius with all border properties. 

You can read how border radius work here - border radius in CSS 

1. Border radius in CSS 

The number of values defines the shape of the corner.

 .one-value {
      border-radius : 50%;
      }
 .two-value {
      border-radius : 10px 20px;
      }
 .three-value {
      border-radius : 50% 0 50%;
      }
 .four-value {
      border-radius : 50% 50% 0 50%;
      }
 

If either value is 0, it means no rounded corner but square. Do not provide a negative value, it is invalid. 

2. Elliptical border radius in CSS 

Set the horizontal radii and vertical radii. 

.one-value {
     border-radius : 30px / 30px;
     }
.two-value {
     border-radius : 10% 50% / 50% 10%;
    } 
.three-value {
     border-radius : 7em 1em 8em / 8em 1em 7em;
    } 
.four-value {
     border-radius : 50% 50% 47% 53% / 31% 28% 72% 69%;
     }

3. Border radius on image

We can also use border-radius property on the image. We can make images rounded or in different shapes.

 .case-one img {
     border-radius : 50%;
     }
 .case-two img {
     border-radius : 1em 7em;
     }
 .case-three img {
     border-radius : 50px 50px 0;
     }
 .case-four img {
     border-radius : 50% 50% 20px 20px;
     }

4. One side rounded corner with border-radius properties

We can use border-radius properties to round the different corners. It is useful if we want to shape only one corner. 

.top-left {
    border-top-left-radius : 50%;
    }
.top-right {
    border-top-right-radius : 50%;
    }
.bottom-right {
    border-bottom-right-radius : 70px;
    }
.bottom-left {
    border-bottom-left-radius : 70px;
    }

5. Border-radius with border properties 

We can use border-radius with border-width, border-style and border-color.

 .border-color {
      border : 4px solid; 
      border-color : orange yellow red blue;
      border-radius : 50%;
    }
 .border-style {
      border : 4px #ba55d3;
      border-style : inset outset;
      border-radius : 10px 13px;
     }
 .border-width {
      border : solid red;
      border-width : 1em 0.5em;
      border-radius : 0 0 50%;
     }
 .border {
      border : 4px double blue; 
      border-radius : 0 50% 0 50%;
     }