Ask any question about CSS here... and get an instant response.

How do I round only one corner of a div using border-radius?

Asked on Sep 10, 2025

Answer

To round only one corner of a div, you can use the `border-radius` property with specific values for each corner. Here's how you can achieve this effect.

<!-- BEGIN COPY / PASTE -->
    <div class="rounded-corner"></div>

    <style>
      .rounded-corner {
        width: 200px;
        height: 100px;
        background-color: lightblue;
        border-radius: 20px 0 0 0; /* Top-left corner rounded */
      }
    </style>
    <!-- END COPY / PASTE -->

Additional Comment:

The `border-radius` property can take up to four values, corresponding to the top-left, top-right, bottom-right, and bottom-left corners.
In the example, only the top-left corner is rounded by setting the first value to 20px and the others to 0.
Adjust the pixel values to achieve the desired rounding effect for any specific corner.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How do I round only one corner of a div using border-radius?

Asked on Sep 10, 2025

Answer

The Q&A Network