border
- React Native course
- Beginner
- Lesson 34/116
- 5 min
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.
Practice 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>.
Starter code
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Card() {
return (
<View>
<Text>Card</Text>
</View>
);
}
const styles = StyleSheet.create({
// Add the card style here
});Sample 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 }
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Write the corner rounding property
styles = StyleSheet.create({
card: { borderWidth: 1,____: 8 }
});styles = StyleSheet.create({
card: { borderWidth: 1,borderRadius: 8 }
});Explanation: borderRadius rounds the corners.
2 Match each property to its job
| Term | Meaning |
|---|---|
borderWidth |
Line thickness |
borderColor |
Line color |
borderRadius |
Corner rounding |
overflow: 'hidden' |
Clips content |
3 Which is a valid border style?
{ ??? }- borderWidth: 1, borderColor: 'gray' Correct answer
- border: '1px gray'
- borderWidth 1, borderColor gray
- border: 1 gray
Explanation: Each border property is written separately in React Native.