Inspiring

Answered

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

Forum|Forum|7 years ago
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".

U

Under S.Author

Inspiring

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

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

U

Under S.Author

Inspiring

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

Legend

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

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

The real breakthrough in this discussion will come when you disclose exactly what it is you are trying to accomplish with your circles A test page would likely yield more understanding of your issues and lots better answers.

ALsp wrote
The real breakthrough in this discussion will come when you disclose exactly what it is you are trying to accomplish with your circles A test page would likely yield more understanding of your issues and lots better answers.

Can't share at the moment the way I have things set up, but fully intend to once I'm done -- because I'll be looking to add simple animations as a final step to make the whole thing a bit livelier (simple stuff like having divs "slide into view" upon loading) and y'all are amazingly helpful when it comes to that stuff.

In the meantime, I can say this much : imagine a round profile picture that's either left or right-justified at the top of a page of text. So it's an inline-block object (usually a SPAN with a background image) and text wraps around it. As for why I don't just use an image link there, I just switched from "IMG" tags to "container background images" a few years ago at someone (from here)'s suggestion. This also allows me to scale the image differently without affecting the object's dimensions (ie, zoom a bit closer into it).

Jon Fritz

Correct answer

Community Expert

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".

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded