[View] Border radius greater than half of width/height works strange

[liubko]

  circle: {
    width: 50,
    height: 50,    
    borderRadius: 25
  }

with borderRadius greater than 25 it isn't going to be a circle anymore.

I made a Demo https://rnplay.org/apps/vj3mJQ
You could reproduce it in react v.0.0.6-rc

[JonasJonny]

From CSS, border-radius should be half of width/height. If you set bigger value, then browser render the circle anyway but it is not a good practice. Maybe react-native is the same.

[liubko]

@JonasJonny totally agree. Maybe it is not a bug at all, but I think most people will expect to get circle in that case.

[nicklockwood]

We aim to follow the CSS spec as closely as possible with the border styles, even if the spec is weird. If it's behaving differently from a spec-compliant browser like Chrome then it may be a bug, otherwise it's as intended.

[ide]

The spec says to prevent overlapping which is what produces the circle effect: http://www.w3.org/TR/css3-background/#corner-overlap. If you were to set a 50pt radius on just one corner it should produce a quarter-circle: https://jsfiddle.net/36uax3oL/1/

[cgarvis]

Just ran into this. In 0.5.0, borderRadius equal to the width/height got me a circle. Upgrading to 0.6.0 cause that break.

[brentvatne]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out it's new home: https://productpains.com/post/react-native/view-border-radius-greater-than-half-of-widthheight-works-strange

[brentvatne]

Fixed in b115277