CODEWITHSUNDEEP
css
Alexander Mistakidis
Alexander Mistakidis

Reputation: 3130

Is it better to specify border-radius in percentages for circle borders?

In general, is it more efficient to use percentages or pixel/em values for border-radii?

For an example: for a square image 200px by 200px, which out of border-radius:50% or border-radius:100px is best? Obviously percentages for circles are easier to manage, but are percentages significantly harder to calculate? Are there any caveats?

This question is assuming the use of a compatible browser, and static-sized images.

Upvotes: 6

Views: 1019

Answers (1)

Parhum
Parhum

Reputation: 770

I prefer to user percentage values because if I change size of my image, I don't need change my border-radius. But in MDN site you can read this bugs about percentage value:

percentage values

  • are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010)
  • are buggy in Opera prior to 11.50
  • are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). Both horizontal and vertical radii were relative to the width of the border box.
  • are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)

Check this link for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#_values

Upvotes: 3

Related Questions