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.
Recommended Links: