Sometimes, we want to use border radius only for 1 corner with React Native.
In this article, we’ll look at how to use border radius only for 1 corner with React Native.
How to use border radius only for 1 corner with React Native?
To use border radius only for 1 corner with React Native, we can use the borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, or borderTopRightRadius properties.
For instance, we write
const styles = EStyleSheet.create({
imgBox: {
width: px(72),
height: px(72),
borderBottomLeftRadius: 2,
borderTopLeftRadius: 2,
overflow: "hidden",
},
img: {
width: px(72),
height: px(72),
},
});
//...
const Comp = () => {
//...
return (
<View style={styles.imgBox}>
<Image source={{ uri: "your image url" }} style={styles.img} />
</View>
);
};
to create a stylesheet wiht create.
We set the borderBottomLeftRadius and borderTopLeftRadius properties to set the border radius for those 2 corners in pixels.
Then we apply the imgBox style to the View which has the border radius styles.
Conclusion
To use border radius only for 1 corner with React Native, we can use the borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, or borderTopRightRadius properties.
