[CSS 3] Use the Border-Radius CSS Property to Define Horizontal and Vertical Radius

In this lesson, we dive into using CSS border-radius. We will look at how you can use it to create not only basic shapes but complex ones too.

We will start with a shorthand notation that allows us to define a uniform radius for an element. Then we will progress onto a longhand notation. That will give us the power to define the horizontal and vertical radius for each corner of an element.

 

.rect {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  
  border-radius: 50% 50% 0 0 / 100% 100% 0 0
}

.rect {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  
  border-radius: 50% 50% 0 0 / 100% 100% 0 0
}

 

 

See the Pen border-radius by Zhentian Wan (@Answer1215) on CodePen.