Sometimes, we want to add border radius only for 1 corner with React Native.

In this article, we’ll look at how to add border radius only for 1 corner with React Native.

How to add border radius only for 1 corner with React Native?

To add border radius only for 1 corner with React Native, we can set the borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, and borderTopRightRadius individually.

For instance, we write:

import * as React from 'react';
import { View, Text } from 'react-native';
import { Card } from 'react-native-paper';

const App = () => {
  return (
    <View>
      <View
        style={{
          borderBottomLeftRadius: 5,
          borderBottomRightRadius: 0,
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0,
          border: '1px solid black',
        }}>
        <Text>hello world</Text>
      </View>
    </View>
  );
};
export default App;

to set borderBottomLeftRadius to 5 and the rest to 0 to add a border radius to the bottom left corner only.

Conclusion

To add border radius only for 1 corner with React Native, we can set the borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, and borderTopRightRadius individually.