Design comparison
Solution retrospective
Issue Description: I'm experiencing an issue with applying border radius to a div in my project. When I add the border radius, it affects all sections of the container, causing unexpected curves in the center. How can I apply border radius to only specific sections of the div while keeping other sections unaffected? CSS Code: Here's the CSS code I'm using to apply the border radius to my div container: .container { border-radius: 10px; } Desired Outcome: My goal is to have rounded corners on all four corners.
Community feedback
- @leonp84Posted 9 months ago
Hi Wanjiru, try nesting your .container divs within a larger outer div. Give the outer div rounded corners and leave the inner ones alone (except for maybe adjusting the size, making it slighly smaller than the outer div, so that the rounded corners will be visible).
<div class="rounded-corner-container">
<div class="container"> </div> <div class="container"> </div>
</div>
Marked as helpful0 - @dev-aexPosted 9 months ago
Nice Work Wanjiru!
The problem you are mentioning is because you are using the same class on different divs:
<div class="container"></div>
All the <div> tags that have the .container class, will have the border-radius. So the solution for that is to create a class only to apply the border-radius to the container that you want:
HTML:
<div class="container border"></div>
(Your can apply multiple classes to a <div> just separating them with a space. Here the <div> have the class "container" and the class "border")
CSS:
.border { border-radius: 10px; }
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord