Prev Next

CSS Rounded Borders

The border-radius property allows you to create rounded corners, softening the look of boxes and making elements feel more modern and friendly. Adjust the radius values to achieve slight curves or fully rounded shapes, perfect for buttons, images, and feature boxes.

Key Topics

Simple Border Radius

Set border-radius: 10px; to round corners. Larger values produce more pronounced curves.

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Rounded Border Example</title>
    <style>
        .rounded-box {
            border: 2px solid #333;
            border-radius: 10px;
            padding: 20px;
            font-family: Arial, sans-serif;
            max-width: 300px;
            margin: 20px auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="rounded-box">
        <h2>Rounded Corners</h2>
        <p>A gentle 10px radius gives this box softer edges.</p>
    </div>
</body>
</html>

Explanation: The 10px radius smooths out sharp corners, making the design feel more inviting.

Creating Circles and Ovals

Use border-radius: 50%; to create a circle on a square element, or produce ovals on rectangular elements. This is commonly used for profile pictures or decorative elements.

Key Takeaways

  • Soft Edges: Rounded corners give a modern, friendly look.
  • Versatility: Adjust the radius to create subtle curves or perfect circles.
  • Branding: Rounded shapes can match brand identity or user-friendly aesthetics.
Prev Next