React Native border radius rendering

When you add a border radius to a border in CSS the border will gradually decline in width around the border radius, as you can see in this example:

.example {
  width: 100px;
  height: 50px;
  background: #000;
  border-bottom: 4px solid red;
  border-bottom-right-radius: 20px;
}
<div class="example"></div>

I am trying to do the same within React Native, however React Native seems to cut off the last bit:

React native example

As you can see it doesn’t taper off the border along the radius.

What would be the best approach to get the border to taper off like it does in web engines?

18 thoughts on “React Native border radius rendering”

Leave a Comment