Border Radius CSS

The following is a basic and most common Border Radius CSS properties, which is supported all the latest browser.

1. Circle Shape

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;

2. Square Shape

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

3. Border Radius Top Left

-webkit-border-top-left-radius: 10px;
-moz-border-radius-top-left: 10px;
border-top-left-radius: 10px;

4. Border Radius Top Right

-webkit-border-top-right-radius: 10px;
-moz-border-radius-top-right: 10px;
border-top-right-radius: 10px;

5. Border Radius Bottom Left

-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottom-left: 10px;
border-bottom-left-radius: 10px;

6. Border Radius Bottom Right

-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottom-right: 10px;
border-bottom-right-radius: 10px;

7. Border Radius

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
width: 100px;
height: 100px;
border: 1px solid #666;

Round corners using CSS3

The border-radius property to round the corners of an element’s. border-radius: 10px 10px 10px 10px; (first one is for the top-left corner, second one for top-right corner, third one for bottom-right corner, and fourth value applies to bottom-left corner).

In this tutorial, we learn how border-radius works with any element.

Using the border-radius CSS we can control over each corner of an element.

To make rounded rectangle shape, capsule or pill shape, ellipses shape, circle shape.

Just have to set properties on each individual corner by giving value in pixels or percentage both forms of value works in all the latest browsers.

Also, the use of the border-radius property to make an image as a circular form or depend on the need to change the image structure as well.

Below is an example of how to make a square image or circle image using CSS.

Below are the CSS for make a square image:

.square-image {width: 200px; height: 200px; overflow: hidden; border-radius: 10px;}

Below are the CSS for make a circle image:

.circle-image {width: 200px; height: 200px; overflow: hidden; border-radius: 50%;}

Border Radius CSS

Here are another example of standard rounded profile image using border-radius CSS to make a rectangle image a circle.

<div class="profile-pic">
  <img src="profile.jpg" alt="profile">
</div>

First, we have to create an outer div that contains a normal rectangle image and write CSS for outer div and also for an inside image.

.profile-pic {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #f1ecec;
}
.profile-pic img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}  

You can customize this code further as per your requirement.