CSS Round Corners


Go to main Page

Round Corners in CSS

Sometimes we need around corners for containers and images.

We can create round corners by a property border-radius.

Let us create a container with round corners:


      .container {
  width: 300px;
  height: 300px;
  border-radius:50%;
}


Let us create a image with round corners:



      img {
  width: 500px;
  height: 500px;
  border-radius:40px;
}


Shapes in CSS

Circle

div {
  width: 200px;
  height: 200px;
  border-radius:50%;
}


Square

div {
  width: 200px;
  height: 200px;
   background-color: orangered;
}


Rectangle

div {
  width: 400px;
  height: 200px;
   background-color: orangered;
}


Oval


div {
  height: 50px;
  width: 100px;
  background-color: orangered;
  border-radius: 50%;
}


Triangle


div{
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid orangered;
}