16

.microsoft {
"border-radius": 0;
}

.apple {
"border-radius": 20%;
}

Comments
  • 6
    Percentage border radiuses is stupid.
  • 4
    @ScriptCoded how come? I use them when the size of the element isn't necessarily related to the size of the viewport.
  • 1
    @M1sf3t please give an example.
  • 2
    @dder I don't have many, but the first coming to mind is a widget dashboard I'm working on that let's the user resize the individual widgets.
  • 3
    @M1sf3t I'm generalizing, but in the case that you want rounded UI elements, percentage border radius looks more like a stretched image than anything else. But I'm assuming this is supposed to be CSS, but I now realize that that isn't even valid CSS.

    EDIT: For clarification: https://jsfiddle.net/mu0Lj29f/1/
  • 2
    @ScriptCoded i didn't notice that either 😅.

    try this in your fiddle.... border-radius: 10%/20%;

    I'm not 100% sure on what that'll translate to when I start resizing my widgets because I've only just now got them to moving around with the mouse but that's the plan. Ordinarily I would use vh, but I'm almost positive that won't work in this situation.
  • 2
    Not sure and not tried, but applying 50% radius to an image of unknown size to get it to look like a circle could probably be a usecase.
  • 3
    @LinusCDE Yea that works, I've used it to produce circles for a couple of things, not just images.
  • 1
    Using percentage border-radius is really stupid idea, unless you know that the element will have exactly 1:1 width to height ratio. Otherwise you will end up with ugly looking ellipse-like corners.
  • 2
    @hitzoR that's what the "/" is for. As long as the element's aspect ratio remains the same you can produce symmetrical corners, but if your setting width and height based on thier respective window sizes then it won't help. At least it doesn't seem like it would. Think I may try to go ahead and build that resize feature for my dashboard tonight so I can play around with it and find out for sure.
  • 1
    @M1sf3t I'm not sure why would someone even consider using vh or vw for corner radius :D Those units are meant to be used for layout, not for element styling. Using rem or px is all you really need, and you don't have to have fixed aspect ratio, which is also stupid idea which won't work accross devices.
  • 1
    @M1sf3t Do you want it to scale with the element size? Might be a bit tricky without some javascript :)

    @LinusCDE Works if the image is square. Else, just using something like 999999px works just fine!
  • 0
    Does a mind fuck with border radius vw or vh XD
  • 1
    @hitzoR I wasn't aware no one used viewport for radius, I literally use them for everything unless I am using a percentage.

    Still you read that all wrong. I was talking about having a fixed aspect ratio on an element, if it needs to be "responsive", then set both height and width with either vw or vh, but not both. Not the exact definition of responsive but neither is fixed aspect ratio.

    Any case, if that's what your going for then percentages can come in handy. And they may otherwise, I'm not sure how it works with elements that resize themselves to the page, generally if I'm doing that I'm using vh or vw for my corners.

    I don't really like using px and I know the definition of rem, but I've never understood how to figure out what my expected output would be, generally it's just trial and error til I find the size I need, then I adjust the window a few thousand times to make sure it resizes correctly.
  • 2
    @ScriptCoded the corners scaling to the element size? Yea, ideally I can just resize the height and width of the widget with a little js and the corners, text and everything else just follow suit. Pretty sure it'll work if I keep the widget's proportions in tact but not so certain about what'll happen if I allow for the widget's height and width to be adjusted individually.

    If I'm understanding the docs right, when you add the / and a second measurement one percentage is for top/bottom portion of the corner, the other is for the left/right portion. So they should adjust properly regardless, but then again when does css ever do what you expect it to
  • 2
    @M1sf3t If you keep the proportions you should be fine :) But if you don't need the corners to scale px is the easier choice
  • 1
    @ScriptCoded unfortunately I can never rest with that. I'm super ocd when it comes to anything visual, one of the reasons I'm trying to find my way off of the frontend, designing for general public consumption drives me insane. How else do you think I always know all these random things about css. I've only got 3 years of random projects under my belt, 0 professional or collaborative experience to speak of 😅
  • 0
    Y'all arguing about the border radius percentage but don't even talk about his properties being in quotes
  • 1
    @M1sf3t 1000px is better
  • 1
    @AlgoRythm we figured it out about the 3rd or 4th comment but we were already wrapped up with this other tangent.

    @010001111 to make a circle? yea, I was never sure if there was a consequence for doing it that way, since technically the element is only allowing the curve to go so far and the rest of the measurement is just off in the wind somewhere.
  • 1
    @M1sf3t I fully understand. I‘ve been through this thought and I‘d argue accuracy for perfect circle is more important than an 16K Screen that we may or may not have in years where the unit is no longer sufficient.

    Because there is still dpi scaling, that shouldn’t be too much of a problem. In a good architecture, it also shouldn’t be hard to fix, in case the problem does occour.

    Of course, bigger circles need higher values, I think 1000px is a reasonable balance for 99% of all cases and don’t waste too much bytes.

    A good designer will also spot a 1px off circle, which is harder to spot if it’s an oval and not a perfect circle.
  • 0
    .me {

    background-color: #008080;

    }

    .me:hover {

    background: linear-gradient(#009090, #00a0a0);

    }

    EDIT: why did it put new lines between my code?
Add Comment