Skip to main content
U
Under S.
Inspiring
November 9, 2018
Answered

How much markup is needed to safely use border-radius?

  • November 9, 2018
  • 3 replies
  • 1948 views

Hi,

I've been using the following code to create round containers for a while now.

.round {

width: 350px; height: 350px;

-moz-border-radius: 350px/350px;

-webkit-border-radius: 350px 350px;

-o-border-radius: 350px 350px;

border-radius: 350px/350px;

}

We used to have to do the same tricks w/ opacity to get it working on all major browsers; have we reached that level of compatibility with border-radius yet, or do I still need to bloat my code with redundant values this way every time I want to use a circle?

Thanks!

    This topic has been closed for replies.
    Correct answer Jon Fritz

    All of the browser prefixes you show have used the standard, non-prefixed property, for more than a few versions now.

    Personally, I only use the standard these days. If, for some weird reason, someone has an old browser that can't see it: "they get square corners, oh well".

    3 replies

    U
    Under S.Author
    Inspiring
    November 9, 2018

    Similar question about rotating divs.

    Code I use :

    .angled {

    -webkit-transform: skewX(-22deg);

    -moz-transform: skewX(-22deg);

    -ms-transform: skewX(-22deg);

    -o-transform: skewX(-22deg);

    transform: skewX(-22deg);

    }

    How much of that should I still be using in 2018 for 99% compatibility?

    Will "transform" alone make the previous 4 lines redundant?

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    November 9, 2018

    Check out http://www.caniuse.com for that kind of information. It's pretty handy.

    U
    Under S.Author
    Inspiring
    November 9, 2018

    https://forums.adobe.com/people/Jon+Fritz+II  wrote

    Check out http://www.caniuse.com for that kind of information. It's pretty handy.

    If I used that website correctly, then "transform" alone is just as compatible as "border-radius" alone and I can stop recycling the redundant code.

    One property I was unable to check for via this website however is "background-size: cover" ("background-size" alone isn't specific enough and there are no matches for "cover" at all).

    Currently, I use :

    .cover {

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    }

    Can I safely drop the 1st three lines of that code definition?

    In other words, the three functions that I had to use backup code for for years no longer need it... correct? "background-size: cover", "transform" and "border-radius" will cover 99% of today's browsers with only 1 line of code each, if I understand correctly.

    ALsp
    ALsp
    Legend
    November 9, 2018

    99.99 + % of all browsers in use support border-radius. So the only declaration needed is:

    .rounded {border-radius: 10px;}

    May I ask what you expect a radius of 350px to accomplish?

    U
    Under S.Author
    Inspiring
    November 9, 2018

    ALsp wrote

    99.99 + % of all browsers in use support border-radius. So the only declaration needed is:

    .rounded {border-radius: 10px;}

    May I ask what you expect a radius of 350px to accomplish?

    Not sure I understand the question. As you can see in the code, height/width is also 350px. Matching the div size + border radius is how I've always created perfect circle containers, rather than rounded corner boxes.

    If you're asking me this question, I'm assuming it's because there's an even easier way to produce circles than border-radius? I can't imagine what it would be, especially after learning that all I need is that one line as a catch-all when I've been using half a dozen lines of unnecessary text 'til now.

    If there's special (non-"border-radius") code to create perfect circles, then I wouldn't be surprised if more irregular shapes aren't far behind (triangle-shaped containers, star-shaped containers, etc.)

    U
    Under S.Author
    Inspiring
    November 9, 2018

    Test Document

    All that's necessary for border-radius is 100%. However, the crux of the matter is that it is usually very bad practice to set a height on an element. This is, after all, the age of responsive design.


    ALsp  wrote

    Test Document

    All that's necessary for border-radius is 100%. However, the crux of the matter is that it is usually very bad practice to set a height on an element. This is, after all, the age of responsive design.

    Hold on a minute here... did you just haphazardly suggest that "border-radius: 100%" is actually a thing? I've never tried it but if that does what I think it does (match the dimensions of the container) then you just simplified my coding by A LOT.

    As for not specifying the height, I would actually love to (since we're dealing with perfect circles, the height will always match the width) but I don't know of any way to tell the CSS to "make the height match the specified width". Would be great if I could just do "height:width". I might actually get away with typing "350px" just once in the class definition.

    Jon Fritz
    Community Expert
    Jon FritzCommunity ExpertCorrect answer
    Community Expert
    November 9, 2018

    All of the browser prefixes you show have used the standard, non-prefixed property, for more than a few versions now.

    Personally, I only use the standard these days. If, for some weird reason, someone has an old browser that can't see it: "they get square corners, oh well".

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices