How to create CSS3 Rounded Corners?

In this tutorial, we will learn to create CSS3 rounded cornered with examples.
By Apurva Mathur Last updated : July 23, 2023

To create CSS3 rounded corners, you can simply use the border-radius property by specifying the radius of the borders in pixels or percentages. You can also independently define the radius for each border corner by using the constituent properties.


Following is the syntax to create CSS3 rounded corners:

selector/element {
    border-radius: value;


The below-given example shows how you can create CSS3 rounder corners.

<!DOCTYPE html>

<html lang="en">
      <meta charset="UTF-8">
      border: 4px solid salmon;
      border-radius: 25%;
      height: 60px;
      width: 20%;
      font-size: 30px;
      text-align: center;
      margin-top: 1%;
      border-radius: 50%;
      border: 4px solid black;
      border-radius: 100%;
      height: 60px;
      width: 20%;
      font-size: 20px;
   <body style="background-color: whitesmoke">
      <div class="one">
         <p>  Border radius 25%</p>
      <h3>Border radius 50%</h3>
      <img src="" height="10%" width="30%" >
      <div class="two">
         <p>Border radius 100%</p>


Example: CSS3 Rounded Corners

CSS Examples »

Comments and Discussions!

Copyright © 2023 All rights reserved.