Mastering Border Radius in CSS: Creating Custom Shapes and Rounded Corners


Border radius in CSS is a property that allows you to control the shape of the corners of an element, giving them rounded or custom shapes. It is commonly used to soften the sharpness of rectangular elements and add visual appeal to various parts of a webpage, such as buttons, containers, avatars, and images.

Here's a breakdown of the property values:

  • <length>: Specifies the radius of the corner as a specific length (e.g., pixels px or em units em).
  • <percentage>: Specifies the radius as a percentage of the width of the element's box. The percentage is relative to the width of the box, not the height.
  • initial: Sets the property to its default value.
  • inherit: Inherits the property value from the parent element.

The border-radius property is used to set the radius of each corner individually or all corners at once. The value provided determines the curvature of the corners. You can specify the radius using length units (such as pixels or percentages) or specific keywords.

Here are some key concepts related to border radius in CSS:

  1. Rounded Corners: By applying equal values to all corners, you can create rounded corners. For example, border-radius: 40px; will make all four corners of the element have a radius of 40 pixels.
  2. Elliptical Corners: You can specify different horizontal and vertical radii to create elliptical corners. For instance, border-radius: 40px 180px; will result in the top-left and bottom-right corners having a radius of 40 pixels, while the top-right and bottom-left corners will have a radius of 180 pixels.
  3. Individual Corner Control: You can set different radius for each corner by providing four space-separated values. For example, border-radius: 40px 200px 10px 0; will set the top-left corner to 40 pixels, top-right to 200 pixels, bottom-right to 10 pixels, and bottom-left to 0 pixel.
  4. Shorthand Syntax: The border-radius property supports a shorthand syntax that allows you to set all four corners in a single line. For instance, border-radius: 10px 20px 10px 20px; can be shortened to border-radius: 10px 20px; or even further to border-radius: 10px; if all four corners have the same radius.
  5. Rounded and Custom Shapes: By using larger values for the border radius or combining different radii for each corner, you can create custom shapes, such as ovals or capsules. Experimenting with different values and combinations can result in unique designs.

Border radius is a versatile CSS property that helps create visually appealing and modern designs by softening the edges of elements. It is widely supported by all major browsers and offers flexibility in achieving various shapes and styles, contributing to the overall aesthetics and user experience of a webpage.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutor Joes</title>
    <style>
      .box1
      {
        height: 150px;
        width:150px;
        background: -webkit-linear-gradient(#e67e22,#e74c3c);
        border-radius: 0px 20px 0px 20px;
        /*
          border-radius: 0px 0px 0px 0px;
          -moz-border-radius: 0px 0px 0px 0px;
          -webkit-border-radius: 0px 0px 0px 0px;
        */
        }
        .box2{
            height: 300px;
            width: 300px;
            background-color: cornflowerblue;
            /* border-radius: 40px; */
            /* border-radius: 40px 180px; */
            /* border-radius: 40px 200px 10px 0; */
            border-radius: 50%;
        }
        
    </style>
</head>
<body>
    <h1>Border Radius In CSS</h1>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
Live Preview

CSS Tutorial


Properties Reference


Cascading Style Sheet


Flexbox Tutorial


CSS Grid Tutorial


Transitions Properties


CSS Properties with Examples


CSS Selectors


CSS Pseudo Elements


CSS Attribute Selectors


Input Pseudo Classes


CSS Examples


CSS Animation Projects