Chapter 13. CSS: Styling Borders and Drawing Lines

Border Radius on Specific Side

Tag:

Back to the course page

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-radius only for a specific corner.

You can also check the sample result here (Demo Site ).

demo code