Reputation: 2065
Is there a way to set the color of the clipped space while using:
border-top-left-radius: 1em;
I want it to be a certain color but it is taking the color of the div behind it
Upvotes: 0
Views: 133
Reputation: 724542
If your element is not positioned with a z-index, you can create and absolutely position a pseudo-element behind it that's as large as the corner radius (or as large as the element itself if you prefer):
.your-div::before {
position: absolute;
width: 1em; /* Or 100% if you prefer */
height: 1em; /* Or 100% if you prefer */
background-color: <your-color>;
content: '';
z-index: -1;
}
If your element does have its own z-index, then z-index: -1
on a child element or pseudo-element won't work, and you'll have to make a new element and position that element behind the one with the rounded corner instead. How you do that will depend on your layout.
Upvotes: 2