borderRadius for specific corner not working on iOS

Hello guys!

I’m trying to style an Image component applying borderRadius for just two corners. The code I’m using to accomplish that is this:

imageStyle: {
		width: 100,
		height: 100,
		borderBottomLeftRadius: 5,
		borderBottomRightRadius: 0,
		borderTopLeftRadius: 5,
		borderTopRightRadius: 0,
		marginRight: 20
}

As you can see, I’m applying a borderRadius of 5 to both left corners and I’m having the next result:

On Android:
On iOS:

Seems like the iOS version is not applying the values.

Additional Information

React Native version: 0.44.0
Platform: iOS & Android
Development Operating System: MacOS Sierra 10.12.4

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:13

Top GitHub Comments

38reactions

nmfzonecommented, Jul 11, 2017

Using overflow: 'hidden' on the same element that have borderRadius should fix this issue, I guess…

26reactions

facuacostagcommented, May 3, 2017

To anyone having this issue, I fixed It by wrapping the Image on a View component and applying the borderRadius to It instead of directly applying It to the Image.

{....}
<View style={styles.imageContainerIOS}>
	<Image
	     style={{ width: 100, height: 100 }} 
	    source={dummyImage}
	/>
</View>

{...}

imageContainerIOS: {
	borderBottomLeftRadius: 5,
	borderBottomRightRadius: 0,
	borderTopLeftRadius: 5,
	borderTopRightRadius: 0,
	overflow: 'hidden',
	marginRight: 20,
	},
{...}