Border Radius on Specific Side
You can also set the border-radius only for a specific corner (top left, top right, bottom left, or bottom right).
Practice
Objective:
Set border radius only for a specific corner
1. Update the body section of the HTML file
Add the code below in the body section of the chapter13.html file. We are using bg-border-radius class already defined before.
In the code below, we are wrapping each set of item groups using the <div> element with the display and flex-wrap properties to structure the results. We'll explain these properties in detail later. For now, just copy and paste the code.
chapter13.html
<h2>Border Radius on Specific Side</h2>
<div class="bg-border-radius">Original</div>
<div style="display: flex; flex-wrap: wrap;">
<div class="bg-border-radius" style="border-top-left-radius: 50%">border-top-left-radius: 50%</div>
<div class="bg-border-radius" style="border-top-right-radius: 50%">border-top-right-radius: 50%</div>
<div class="bg-border-radius" style="border-bottom-left-radius: 50%">border-bottom-left-radius: 50%</div>
<div class="bg-border-radius" style="border-bottom-right-radius: 50%">border-bottom-right-radius: 50%</div>
</div>
2. Check the result with a browser
- Open chapter13.html with a browser.
- You can see how to set
border-radiusonly for a specific corner.
You can also check the sample result here (Demo Site).
