Kevin Powell - Community•2mo ago

Creating an inverted border-radius with CSS

Hello guys, I can't realize the variables that Kevin created on YouTube: https://www.youtube.com/watch?v=khjVPkO35F0&t=312s We have access to the copenpen code, but there are variables inserted that represent the css properties which we don't know exactly what they are. Does anyone know? Thanks

Kevin Powell

YouTube

The other day on Twitter, @FlorinPop pulled me into a conversation, wondering how to create inverted, round corners. Mask-image was probably the easy answer, but after someone in the thread said that making an SVG mask felt like overkill, I had to try and see if I could think of an alternative way! 🔗 Links ✅ The original tweet: https://twi...

13 Replies

Victor GonzalezOP•2mo ago

Test @Kevin Powell ?

Jochem•2mo ago

@Victor Gonzalez please don't @ people to draw them into your thread

clevermissfox•2mo ago

Please remember that the rules you agreed to in order to enter the server include not tagging people that you're not responding to, including KPow. #📝rules perhaps review the rules of the server as well as #how-to-ask-good-questions to adjust your post

Victor GonzalezOP•2mo ago

Ok Jochem, got it

clevermissfox•2mo ago

Ah didn't mean to double down, didn't see jochum beat me to it

Chris Bolson•2mo ago

Kevin is normally pretty good and careful about naming his custom properties. Which are the ones you are unclear on? (link to codepen for reference https://codepen.io/kevinpowell/pen/LYgMQpQ)

Victor GonzalezOP•2mo ago

Hy Chris, I would like no know --_size and corner-coloris. I'm adapting it to my code and I'd like to know exactly. Look:

.house-price::after {
  --_size: 19px;
  content: "";
  position: absolute;
  width: 16px;
  aspect-ratio: 1;
  background-image: radial-gradient(
    circle at 100% 100%, 
    transparent var(--_size),
    var(--_corner-color, white) calc(var(--_size) + 1px)
  );
  rotate: -90deg;
}

.house-price::after {
  --_size: 19px;
  content: "";
  position: absolute;
  width: 16px;
  aspect-ratio: 1;
  background-image: radial-gradient(
    circle at 100% 100%, 
    transparent var(--_size),
    var(--_corner-color, white) calc(var(--_size) + 1px)
  );
  rotate: -90deg;
}

Chris Bolson•2mo ago

This pen uses: --_br = "border radius" --_size = "size" (width and height as the corner radius elements are circles) --_corner-color = the color of the background that will be "visible" (ie the same color as the element itself) The --_size is based on the border radius value.

Victor GonzalezOP•2mo ago

witch property would be ---corner-color to be the same effect? I just want to replace it to the exactly properties to have the exactly same effect.

Chris Bolson•2mo ago

I'm not sure that I understand the question. The --_corner-color needs to have the same value as the element where it is placed. So, in Kevins code the block with the text has a black background so he has given it a value of "black". If the block has a blue background then it would need to be "blue". .... Ah, he has also used the default value.... maybe this is what you are referring to 🤔 With custom variables you can define a default value as a second parameter. This will be used if the custom property isn't set.

var(--_corner-color, white);

var(--_corner-color, white);

So here, if "--_corner-color" hasn't been set, it will use the default value of "white".

Victor GonzalezOP•2mo ago

Yes, but I want to set the exact css properties to understand what's going on. Then I'll add custom variables to my project, you know? For example, I don't know if --_size is a property, height, width... I want to replace all to understand

Chris Bolson•2mo ago

The best way to understand them is to test them with different values and see what happens. This codepen is really quite simple as it only uses 3 custom properties. I suggest that you fork it to your own CodePen account and play around with the values.

Mannix•2mo ago

it not a property it a value of a property you can't set css variable as a property

Gaming

Programming

Creating an inverted border-radius with CSS