CODEWITHSUNDEEP
javascriptreactjsreact-native
Maksim
Maksim

Reputation: 2466

How to use border radius only for 1 corner (react-native)?

How to use border radius in React Native only for 1 corner?

I have a modal window

http://f1.s.qip.ru/etSMz5YP.png

As you can see bottom corners not rounded, it happens when I used backgroundColor for buttons. I was trying to set overflow hidden to modal wrapper and it didn't help me. Now I want to use border radius to buttons (only for 1 corner).

My code http://jsbin.com/sexeputuqe/edit?html,css

Upvotes: 120

Views: 159941

Answers (5)

MOUAD NASSRI
MOUAD NASSRI

Reputation: 79

I found a workaround, and that is when you only have two or 3 borders and you try to apply radius to one corner, the problem occurs.

To overcome this issue, you have to apply border to all the sides of your component like the following:

borderWidth: 1;
borderColor: 'gray';

And because in my case, I want to only display top and right borders, I give the left and bottom the color of the background, and take 1 from both marginLeft and marginTop like the following:

borderLeftColor: 'white';
borderBottomColor: 'white';
marginLeft: -1;
marginTop: -1;

Now If I apply radius to only one corner, it works perfectly:

borderTopRightRadius: 6;

I hope this helps someone, as it is just a workaround.

Thanks

Upvotes: 2

isla_just
isla_just

Reputation: 71

The CSS syntax in react-native is a little different.

Where traditionally you could use:

borderRadius:0,0,20,0;

where you assign border-radius values clockwise

However in this case you'll have to target individual corners of your element like so:

borderTopLeftRadius: 0,
borderTopRightRadius: 0,
borderBottomRightRadius: 20,
borderBottomLeftRadius: 0,

Please let me know if this works for you

Upvotes: 2

Syn Adhitya
Syn Adhitya

Reputation: 471

Add the following properties in your style:

  • borderBottomLeftRadius: number
  • borderBottomRightRadius: number
  • borderTopLeftRadius: number
  • borderTopRightRadius: number

This worked for me.

Thanks

Upvotes: 29

Shirly Chen
Shirly Chen

Reputation: 155

Suppose only the radius is set for the upper left and lower left corners of the Image tag.

<View style={styles.imgBox}>
  <Image source={{ uri: 'your image url' }} style={styles.img} />
</View>

 const styles = EStyleSheet.create({
 imgBox: {
       width: px(72),
       height: px(72),
       borderBottomLeftRadius: 2,
       borderTopLeftRadius: 2,
       overflow: 'hidden',
 },
 img: {
       width: px(72),
       height: px(72),
  },
})

looks good for ios.

Upvotes: 13

Matteo Mazzarolo
Matteo Mazzarolo

Reputation: 4560

Did you already try with the following?
- borderBottomLeftRadius: number
- borderBottomRightRadius: number
- borderTopLeftRadius: number
- borderTopRightRadius: number

Also, you can find more info in the view component docs.

Upvotes: 360

Related Questions