Hello Friends,
Welcome To Infinitbility!
This article will help you to use border color in react native, here we will discuss and understand example of React Native borderColor prop.
We are going to learn how to use borderColor in react native and how to provide color on specific border of box.
Basically, React Native provide borderColor to show color on border and manage border color.
Let’s start today article borderColor in React Native
To make color border, React Native provide borderColor props and we are going understand with example.
Table of content
- All border side
- Specific border side
All border side
React Native provide borderColor prop to show color on border and it accept color name, hex cod, and rgb. Let’s understand with example.
In this example, we will see grey border color around box.
1import React from "react";2import { View, StyleSheet } from "react-native";34const ViewStyleProps = () => {5 return (6 <View style={styles.container}>7 <View style={styles.middle} />8 </View>9 );10}1112const styles = StyleSheet.create({13 container: {14 flex: 1,15 justifyContent: "center",16 backgroundColor: "#fff",17 padding: 20,18 margin: 10,19 },20 middle: {21 flex: 0.3,22 backgroundColor: "beige",23 borderWidth: 5,24 borderColor: "grey",25 },26});2728export default ViewStyleProps;
Output

Specific border side
We are know borderColor prop will effect every side of box but if you want show any specific side of border then React Native provide below props
borderStartColor - To show Left border color borderTopColor - To show Top border color borderEndColor - To show Right border color borderBottomColor - To show Bottom border color
Let understand with example
1import React from "react";2import { View, StyleSheet } from "react-native";34const ViewStyleProps = () => {5 return (6 <View style={styles.container}>7 <View style={styles.middle} />8 </View>9 );10}1112const styles = StyleSheet.create({13 container: {14 flex: 1,15 justifyContent: "center",16 backgroundColor: "#fff",17 padding: 20,18 margin: 10,19 },20 middle: {21 flex: 0.3,22 backgroundColor: "beige",23 borderWidth: 5,24 borderTopStartRadius: 10,25 borderBottomEndRadius: 10,26 borderStartColor: "pink",27 borderEndColor: "pink",28 },29});3031export default ViewStyleProps;
Output

Thanks for reading…
Follow me on Twitter
Join our email list and get notified about new content
No worries, I respect your privacy and I will never abuse your email.
Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.