Border Radius Full Round on Rectangle Elements
Hey everyone, i wanted to know if someone knows a way to make in a responsive and adaptable way, the corner of one rectangle div fully round
I.E: If there is a rectangle with the left and right sides shorter every corner should be rounded so that it's like an ellongated circle like this :
27 Replies
set
border-radius: 999px;Yeah i tried that but for some reason doing that messes with some other thing i wanted to do
I want now to make the right corners to be like 15px rounded
But if i put 999px on left ones and 15px on right ones it makes strange behaviour
then share your code, preferably using something like codepen. "strange" isn't really something that anyone can diagnose without seeing the code
It's like 999px makes the 15px looks like nothing
When i put 500px on the two other instead of 15 it looks more of what i'm trying to do, but it makes no sense
I think it's scaling everything, I've never tried the fully rounded on one side but a regular radius on the other
do you know if this box will always be a single line of text?
You're thinking of trying with em unit ?
pretty much, yeah
Yeah it might be a way to do it, but unfortunately it's based on a picture inside, i have to think about it, but it's sad that there is no % that preserve a 90degrees angle equal (idk how to say)
you may have to resort to a clip-path then
Looks like a mess to use
I just heard about it for the first time, went on mdn and it looks awful
the super high
px value for pill shaped elements is a hack that works well in most cases. But not this one. What you want in this case is a border-radius of half the element's height for the left corners to get the shape your looking for without effecting the other corners: https://codepen.io/jsnkuhn/pen/bGJwGGEYeah i's exactly this but is there a unit to set for example 50% of elements height or width ?
nope, there isn't something like a "element height" unit. If it needs to be responsive there is something similar with container query units though. But this would require a wrapper parent element around the shaped element you want. I want to say it would be
50qh or 50qmin you're going to want to double check that because we are getting pretty obscure here.I FOUND A WAY !!!
border-radius: 50% 50% 50% 50% / 100% 100% 100% 100%;
So for only one side and the other in pixels :
border-radius: 50% 15px 15px 50% / 100% 15px 15px 100%;
Ah... I think it does not work as intended
yeah this is going to very depending on your width and height. Because you're potentially making ellipsis with the border-radius slash syntax
Yeah it's right i just realised by changing width and height...
I think the only real way to do it as i want is with JavaScript
I've done one little program to simulate what i was trying to do
This is quite what i was tryna do
so this is very different from what you were asking about earlier with the 15px corners. The video should be doable with the large px values for
border-radius all around. As it resizes it should maintain the full 1/4 circle corners in both dimensions.Yeah sorry it's in fact very different, but it is not what I was really asking for, I had this idea but what I wanted to do is that on one side the border radius are 50% of smallest side of the rectangle, and the other I can put in fixed px to be less round
But I'm in the right way I think, this is not really possible with CSS only I think
Thanks for your help ! I did not know about variables in CSS, so i fixed a bit to match exactly my request
Do you know if variables like this are a bad practice in CSS ? Does the variables stay "alive" outside of the elements {} ?
variables cascade like any other value, so they're available in children of the element you set them on
Okay thanks !