React Native
border
Learn borderWidth, borderColor and borderRadius.
border
Drawing a line around a box takes three properties together. borderWidth sets the line thickness in pixels, borderColor the line color, borderRadius the corner rounding. For example { borderWidth: 1, borderColor: 'gray', borderRadius: 8 } yields a thin gray-edged box with slightly rounded corners.
React Native has no single border shorthand; each property is written separately. Rounding clips the corners; for a rounded card you usually combine borderRadius with overflow: 'hidden'.
A single edge line
Sometimes you only want a line on one edge. React Native offers borderTopWidth, borderBottomWidth, borderLeftWidth, borderRightWidth. The suffix sets where the line sits; for color use the matching borderTopColor and so on.
For example, to draw a divider only at the bottom of a card, { borderBottomWidth: 1, borderBottomColor: 'lightgray' } is enough. This is common for separating list rows. Start with borderWidth for every edge, then use the directional suffix when one edge needs to differ.
Exercise Write a bordered card
Fill the empty StyleSheet.create block. Define a style named card with borderWidth: 1, borderColor: 'gray', borderRadius: 8, padding: 12. The component returns <View style={styles.card}><Text>Card</Text></View>.
Show example solution
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Card() {
return (
<View style={styles.card}>
<Text>Card</Text>
</View>
);
}
const styles = StyleSheet.create({
card: { borderWidth: 1, borderColor: 'gray', borderRadius: 8, padding: 12 }
});
Test yourself
-
Write the corner rounding property
styles = StyleSheet.create({
card: { borderWidth: 1,____: 8 }
});
Show answer
styles = StyleSheet.create({
card: { borderWidth: 1,borderRadius: 8 }
});
-
Match each property to its job
- borderWidth
- Line thickness
- borderColor
- Line color
- borderRadius
- Corner rounding
- overflow: 'hidden'
- Clips content
-
Which is a valid border style?
{ ??? }
- borderWidth: 1, borderColor: 'gray'
- border: '1px gray'
- borderWidth 1, borderColor gray
- border: 1 gray
Show answer
borderWidth: 1, borderColor: 'gray' — Each border property is written separately in React Native.
Next lesson: Summary - Style
