CSS border-radius clip color

Parad0x13

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

BoltClock

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related