CODEWITHSUNDEEP
javascriptreactjsreact-native
Melvin Koopmans
Melvin Koopmans

Reputation: 3050

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?

Upvotes: 10

Views: 5665

Answers (2)

Darius Mandres
Darius Mandres

Reputation: 928

Your border clips because you've just set a bottom border. Try also applying a left and right border with the same width and color, and it will properly work.

Natural intuition would make you think that the corners should be part of the "top" of the view, but they are actually the sides.

Upvotes: 0

Dinith Minura
Dinith Minura

Reputation: 1496

Faced the same problem and couldn't find a solution with borderRadius styles. Solved by using two Views with different height. But not sure whether is it a good approach. Check snack for a working sample.

view1:{        
    width:200,
    height:100,
    backgroundColor:'red',
    borderRadius:10,    
    alignItems:'center'
  },

view2:{
    alignItems:'center',
    justifyContent:'center',
    width:200,
    height:95,
    backgroundColor:'white',
    borderBottomEndRadius:10,
    borderBottomStartRadius:10
  }

enter image description here

Upvotes: 6

Related Questions