CODEWITHSUNDEEP
css
Parad0x13
Parad0x13

Reputation: 2065

CSS border-radius clip color

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

Answers (1)

BoltClock
BoltClock

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

Related Questions