Border Radius CSS | Border CSS supported in HTML5

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;

Make easy round corners using CSS3

The border-radius property to round the corners of an elements. 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.

Border radius CSS property with example

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%;}

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;
}

Below is an example of how to make a coupon or movie ticket shape using CSS.

HTML

<div class="coupon flex-da">
<div>
<div> class="brandName">smartlearningtutorials.COM</div>
<div> class="getOffer">Buy upto ₹2000 and get ₹200 OFF</div>
</div>
<div> class="halfRL leftOne"></div>
<div> class="halfRL leftTwo"></div>
<div> class="halfRL leftThree"></div>
<div> class="halfRL rightOne"></div>
<div> class="halfRL rightTwo"></div>
<div> class="halfRL rightThree"></div>
</div> 

CSS

.coupon {
  background: #ff2f00f2;
  border: 1px solid #E0E0E0;
  height: 94px;
  padding: 0 1.5rem;
  position: relative;
  margin-top: 0.813rem;
}
.flex-da {
  display: flex;
  align-items: center;
}
.coupon .halfRL {
  position: absolute;
  width: 13px;
  height: 8px;
  background: #ff3a0d;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border: 1px solid #ff3a0d;
  border-bottom: 0;
}
.coupon .halfRL.leftOne {
  top: 10px;
  left: -4px;
  transform: rotate(90deg);
}
.coupon .halfRL.leftTwo {
  top: 40px;
  left: -4px;
  transform: rotate(90deg);
}
.coupon .halfRL.leftThree {
  bottom: 10px;
  left: -4px;
  transform: rotate(90deg);
}
.coupon .halfRL.rightOne {
  top: 10px;
  right: -4px;
  transform: rotate(-90deg);
}
.coupon .halfRL.rightTwo {
  top: 40px;
  right: -4px;
  transform: rotate(-90deg);
}
.coupon .halfRL.rightThree {
  bottom: 10px;
  right: -4px;
  transform: rotate(-90deg);
}
.coupon .getOffer {
  color: #fbfbfb;
  line-height: 1.2rem;
}
.coupon .brandName {
  color: #ffffff;
} 

SCSS

@include border-radius(0.5rem); 
@include box-shadow(inset 0px 0px 5px 0px rgba(0,0,0,0.1));

You can customize this code further as per your requirement.