Border Radius in CSS with 10 Examples

10 CSS Border Radius Examples

In CSS, the border-radius property is used to create rounded corners for elements. The syntax for the border-radius property can take one to four values, which define the radius of the corners.

Examples:

border-radius: 10px;

border-radius: 50%;

border-radius: 50px / 25px;

border-top-left-radius: 20px;

border-bottom-right-radius: 30px;

• Single Value: If one value is provided, it applies to all four corners. For example, border-radius: 10px; will round all corners by 10 pixels.
• Two Values: If two values are provided, the first value applies to the top-left and bottom-right corners, while the second value applies to the top-right and bottom-left corners. For example, border-radius: 10px 20px; will round the top-left and bottom-right corners by 10 pixels and the top-right and bottom-left corners by 20 pixels.
• Three Values: If three values are provided, the first value applies to the top-left corner, the second value applies to the top-right and bottom-left corners, and the third value applies to the bottom-right corner. For example, border-radius: 10px 20px 30px;.
• Four Values: If four values are provided, they apply to the corners in the order: top-left, top-right, bottom-right, and bottom-left. For example, border-radius: 10px 20px 30px 40px; will round each corner with different radii.

Usage of the border-radius property is common in UI design to soften the appearance of elements, making them more visually appealing. It can be applied to various HTML elements such as div, button, and img tags.

Here's an example of how to use the border-radius property:

<div style="border: 1px solid #000; border-radius: 15px;">
This div has rounded corners.
</div>

Below are 10 examples demonstrating how to use the CSS border-radius property to create various rounded corners.

1. 1. Simple Border Radius

   Simple rounded corners with a radius of 10px.

   
   <div style="border: 1px solid #000; border-radius: 10px; padding: 20px;">
   Simple rounded corners with a radius of 10px.
   </div>
   

2. 2. Circle

   
   <div style="width: 100px; height: 100px; background: #f00; border-radius: 50%;">
   </div>
   

3. 3. Elliptical Border Radius

   
   <div style="width: 200px; height: 100px; background: #0f0; border-radius: 50px / 25px;">
   </div>
   

4. 4. Top Left Corner Only

   Rounded top left corner only.

   
   <div style="border: 1px solid #000; border-top-left-radius: 20px; padding: 20px;">
   Rounded top left corner only.
   </div>
   

5. 5. Bottom Right Corner Only

   Rounded bottom right corner only.

   
   <div style="border: 1px solid #000; border-bottom-right-radius: 30px; padding: 20px;">
   Rounded bottom right corner only.
   </div>
   

6. 6. All Corners with Different Radii

   Different radii for each corner.

   
   <div style="border: 1px solid #000; border-radius: 10px 20px 30px 40px; padding: 20px;">
   Different radii for each corner.
   </div>
   

7. 7. Rounded Button

   Click Me

   
   <button style="border: none; background: #007BFF; color: white; border-radius: 5px; padding: 10px 20px;">
   Click Me
   </button>
   

8. 8. Image with Rounded Corners

   

   
   <img src="https://code2care.org/150" style="border-radius: 15px;" alt="Rounded Image"/>
   

9. 9. Card with Shadow and Rounded Corners

   Card with shadow and rounded corners.

   
   <div style="border: 1px solid #ccc; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); padding: 20px;">
   Card with shadow and rounded corners.
   </div>
   

10. 10. Hover Effect with Border Radius

    Hover over me!

    
    <div style="width: 200px; height: 100px; background: #007BFF; border-radius: 10px; transition: border-radius 0.3s;" onmouseover="this.style.borderRadius='50%';" onmouseout="this.style.borderRadius='10px';">
    Hover over me!
    </div>