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

Contributor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

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!

Views

439

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Nov 09, 2018 Nov 09, 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".

Likes

Translate

Translate
Adobe Community Professional ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

Be very careful when you attempt animate using Adobe's tools. They suck. A lot. Here is a peek at a new animation tool we are close to finishing for our Dreamweaver customers:

Panache 1.1.0

As for wrapping text around images, that is really a print design thing that often causes problems on a web page. But back to my question... what is the circle for? What's inside of it?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

ALsp  wrote

As for wrapping text around images, that is really a print design thing that often causes problems on a web page. But back to my question... what is the circle for? What's inside of it?

An image that accompanies the article wrapping around it. So everything except the URL stays the same in the layout (size, positioning, visual effects, everything except the image source) . Only the image itself changes from one article to the next.

I guess it's kind of like a Facebook profile photo, only larger, in that the image changes (from one profile to the next) but its context is always the same.

PS: I tried "border-radius: 100%" and it just changed my life. I will always be using this for circles now. Thank you.

(As for Adobe animations, I've never even looked at them. I will likely be falling back on cherrypicking from public jQuery libraries.)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

(As for Adobe animations, I've never even looked at them. I will likely be falling back on cherrypicking from public jQuery libraries.)

You probably don't know who I am (gosh this community is so terribly shrunken), but my company pioneered Dreamweaver extensions 22 years ago. We remain the only extension developer that actually writes its scripts from the ground up. We do not use jQuery. As a result, our widgets and animations tend to be substantially more efficient and polished than your run of the mill jQuery script.

Just saying

Quality of code and support of our customers is our thing.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Under+S.  wrote

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.

Why don't you investigate css shapes, works in most browsers and devices, and there is even a very good polyfill for IE and Edge -

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

LATEST

Good suggestion. My personal dislike for wrapped text biases me sometimes

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

In the standard box model, you might go with an overkill border-radius like 350px on a 350 pixel box because the padding and border of the box add to the box's width/height. If you change the box-sizing property of css to border-box, that's no longer an issue, because the padding and border become part of the overall box width...


HTML:

<div id="div1"></div></div id="div2"></div>

CSS:

#div1 {
width:350px;

height:350px;

border:1px solid black;

border-radius:175px;

padding:20px;
}

#div2 {

box-sizing:border-box;
width:350px;

height:350px;

border:1px solid red;

border-radius:175px;

padding:20px;
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

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

In the standard box model, you might go with an overkill border-radius like 350px on a 350 pixel box because the padding and border of the box add to the box's width/height. If you change the box-sizing property of css to border-box, that's no longer an issue, because the padding and border become part of the overall box width...


HTML:

<div id="div1"></div></div id="div2"></div>

CSS:

#div1 {
width:350px;

height:350px;

border:1px solid black;

border-radius:175px;

padding:20px;
}

#div2 {

box-sizing:border-box;
width:350px;

height:350px;

border:1px solid red;

border-radius:175px;

padding:20px;
}

I wish I knew enough to understand what you just wrote, but I admit much of that flew over my head (sorry, I'm really just a designer doing what he can with the coding part) and all I see in both examples is "border-radius" having to be defined alongside "width/height" which is what I'm already doing.

In other words, if I'm already getting the job done with only "width/height=350 + border-radius=350" then I'm not sure how "width/height=350 + border-radius=350 + box-sizing=border-box" simplifies things. I still have 3 lines to modify every time I want the circle bigger or smaller (width, height, border-radius).

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

Have you ever noticed, when you add padding to your circle containers, they tend to grow a bit on you?

Adding the box-sizing property and setting it to border-box, will keep your circles the size you decide they need to be, while still giving you the padding you want around whatever content you add.

With the normal box model, you set width (width:350px), then padding (20px per side) and border (2px per side) get added on, so you end up with a box 394 pixels wide.

With the box-sizing:border-box setting you get a 350 pixel wide box where the padding and border essentially subtracted out of the 350 pixel width instead, leaving a "content area" (for text and what-not) 306 pixels wide in a box exactly 350 wide.

With 100% on the border-radius like Al pointed out, you would only ever change the width and the circle would grow accordingly. Box-sizing:border-box makes sure it's the width you set, and not a combination of other items.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

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

Have you ever noticed, when you add padding to your circle containers, they tend to grow a bit on you?

Not really... but that's probably because I have this at the top of my CSS file :

* {

box-sizing: border-box;

margin: 0; padding: 0;

}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

Huh, I would have thought for sure that's why you were doubling up your border-radius setting the way you were. You would only have "needed" border-radius:175px to make a circle out of 350px wide/tall boxes. I figured you were just doubling it to "make sure it stayed round" after adding padding and what-not.

Border-radius has most, if not all the same units as anything else in css, %, px, em, vh, vw (those last two do interesting things when a screen is resized)

CSS border-radius property

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

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

Huh, I would have thought for sure that's why you were doubling up your border-radius setting the way you were. You would only have "needed" border-radius:175px to make a circle out of 350px wide/tall boxes. I figured you were just doubling it to "make sure it stayed round" after adding padding and what-not.

That was a perfectly reasonably assumption given the circumstances, but nah... the padding isn't why (because as you saw, I use code at the top of my CSS file to eliminate all padding/margin quirks to keep the math as simple as possible for myself). The reason I use the same value in border-radius as height/width is just to keep things simple for myself (since using a higher value gives the same results, I just match them, rather than calculate the precise half every time).

However, Al just blurted out "border-radius:100%" and if that turns out to be a catch-all that makes it redundant for me to specify the radius AT ALL (if I want a perfect circle) like I hope it does, then my code just got a lot simpler.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Nov 09, 2018 Nov 09, 2018

Copy link to clipboard

Copied

If you care to support extremely old phones:

.angled {

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

transform: skewX(-22deg);

}

For everything else:

.angled {

transform: skewX(-22deg);

}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines