How to create a border in react native?

Hello Friends 👋,

Welcome To Infinitbility! ❤️

React native provides borderWidth property to make border, borderWidth plays the main role to make any border because it required CSS to make any type of border.

The borderWidth decides the thickness of the border and 1 its min value.

After borderWidth, come borderColor and borderRadius property which decide color and cornor round things.

Above those things, react-native provides the option to decide top, bottom, left, and right specific styles.

For example,

when you want to show the border at the bottom only then do you have to use the borderBottomWidth property, it will show only the border at the bottom.

this rules apply for borderColor and borderRadius also.

Now take an example to create a box border.

import React from "react";
import { View, StyleSheet } from "react-native";

const ViewStyleProps = () => {
    return (
      <View style={styles.container}>
        <View style={styles.box} />
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    margin: 10,
  },
  box: {
    height: 40,
    borderWidth: 1,
  },
});

export default ViewStyleProps;

Output

Learn detailed documentation for borderWidth, borderColor, and border Radius.

React Native borderWidth

React Native borderColor

React Native borderRadius

Thanks for reading…

Output#

Output