Border Radius
Set rounded corners with customizable radii.
Import​
src/screens/SplashScreen.js
import { bdr } from "nativeflowcss";
Properties​
| Object | Native Properties |
|---|---|
| bdr.rounded_none | { borderRadius: 0 } |
| bdr.rounded_sm | { borderRadius: 2 } |
| bdr.rounded | { borderRadius: 4 } |
| bdr.rounded_md | { borderRadius: 6 } |
| bdr.rounded_lg | { borderRadius: 8 } |
| bdr.rounded_xl | { borderRadius: 12 } |
| bdr.rounded_2xl | { borderRadius: 16 } |
| bdr.rounded_3xl | { borderRadius: 24 } |
| bdr.rounded_ful` | { borderRadius: 9999 } |
| bdr.rounded_s_none | { borderStartStartRadius: 0 , borderEndStartRadius: 0 } |
| bdr.rounded_s_sm | { borderStartStartRadius: 2 , borderEndStartRadius: 2 } |
| bdr.rounded_s | { borderStartStartRadius: 4 , borderEndStartRadius: 4 } |
| bdr.rounded_s_md | { borderStartStartRadius: 6 , borderEndStartRadius: 6 } |
| bdr.rounded_s_lg | { borderStartStartRadius: 8 , borderEndStartRadius: 8 } |
| bdr.rounded_s_xl | { borderStartStartRadius: 12 , borderEndStartRadius: 12 } |
| bdr.rounded_s_2xl | { borderStartStartRadius: 16 , borderEndStartRadius: 16 } |
| bdr.rounded_s_3xl | { borderStartStartRadius: 24 , borderEndStartRadius: 24 } |
| bdr.rounded_s_full | { borderStartStartRadius: 9999 , borderEndStartRadius: 9999 } |
| bdr.rounded_e_none | { borderStartEndRadius: 0 , borderEndEndRadius: 0 } |
| bdr.rounded_e_sm | { borderStartEndRadius: 2 , borderEndEndRadius: 2 } |
| bdr.rounded_e | { borderStartEndRadius: 4 , borderEndEndRadius: 4 } |
| bdr.rounded_e_md | { borderStartEndRadius: 6 , borderEndEndRadius: 6 } |
| bdr.rounded_e_lg | { borderStartEndRadius: 8 , borderEndEndRadius: 8 } |
| bdr.rounded_e_xl | { borderStartEndRadius: 12 , borderEndEndRadius: 12 } |
| bdr.rounded_e_2xl | { borderStartEndRadius: 16 , borderEndEndRadius: 16 } |
| bdr.rounded_e_3xl | { borderStartEndRadius: 24 , borderEndEndRadius: 24 } |
| bdr.rounded_e_full | { borderStartEndRadius: 9999 , borderEndEndRadius: 9999 } |
| bdr.rounded_t_none | { borderTopLeftRadius: 0 , borderTopRightRadius: 0 } |
| bdr.rounded_t_sm | { borderTopLeftRadius: 2 , borderTopRightRadius: 2 } |
| bdr.rounded_t | { borderTopLeftRadius: 4 , borderTopRightRadius: 4 } |
| bdr.rounded_t_md | { borderTopLeftRadius: 6 , borderTopRightRadius: 6 } |
| bdr.rounded_t_lg | { borderTopLeftRadius: 8 , borderTopRightRadius: 8 } |
| bdr.rounded_t_xl | { borderTopLeftRadius: 12 , borderTopRightRadius: 12 } |
| bdr.rounded_t_2xl | { borderTopLeftRadius: 16 , borderTopRightRadius: 16 } |
| bdr.rounded_t_3xl | { borderTopLeftRadius: 24 , borderTopRightRadius: 24 } |
| bdr.rounded_t_full | { borderTopLeftRadius: 9999 , borderTopRightRadius: 9999 } |
| bdr.rounded_r_none | { borderTopRightRadius: 0 , borderBottomRightRadius: 0 } |
| bdr.rounded_r_sm | { borderTopRightRadius: 2 , borderBottomRightRadius: 2 } |
| bdr.rounded_r | { borderTopRightRadius: 4 , borderBottomRightRadius: 4 } |
| bdr.rounded_r_md | { borderTopRightRadius: 6 , borderBottomRightRadius: 6 } |
| bdr.rounded_r_lg | { borderTopRightRadius: 8 , borderBottomRightRadius: 8 } |
| bdr.rounded_r_xl | { borderTopRightRadius: 12 , borderBottomRightRadius: 12 } |
| bdr.rounded_r_2x | { borderTopRightRadius: 16 , borderBottomRightRadius: 16 } |
| bdr.rounded_r_3xl | { borderTopRightRadius: 24 , borderBottomRightRadius: 24 } |
| bdr.rounded_r_full | { borderTopRightRadius: 9999 , borderBottomRightRadius: 9999 } |
| bdr.rounded_b_none | { borderBottomRightRadius: 0 , borderBottomLeftRadius: 0 } |
| bdr.rounded_b_sm | { borderBottomRightRadius: 2 , borderBottomLeftRadius: 2 } |
| bdr.rounded_b | { borderBottomRightRadius: 4 , borderBottomLeftRadius: 4 } |
| bdr.rounded_b_md | { borderBottomRightRadius: 6 , borderBottomLeftRadius: 6 } |
| bdr.rounded_b_lg | { borderBottomRightRadius: 8 , borderBottomLeftRadius: 8 } |
| bdr.rounded_b_xl | { borderBottomRightRadius: 12 , borderBottomLeftRadius: 12 } |
| bdr.rounded_b_2xl | { borderBottomRightRadius: 16 , borderBottomLeftRadius: 16 } |
| bdr.rounded_b_3xl | { borderBottomRightRadius: 24 , borderBottomLeftRadius: 24 } |
| bdr.rounded_b_full | { borderBottomRightRadius: 9999 , borderBottomLeftRadius: 9999 } |
| bdr.rounded_l_none | { borderTopLeftRadius: 0 , borderBottomLeftRadius: 0 } |
| bdr.rounded_l_sm | { borderTopLeftRadius: 2 , borderBottomLeftRadius: 2 } |
| bdr.rounded_l | { borderTopLeftRadius: 4 , borderBottomLeftRadius: 4 } |
| bdr.rounded_l_md | { borderTopLeftRadius: 6 , borderBottomLeftRadius: 6 } |
| bdr.rounded_l_lg | { borderTopLeftRadius: 8 , borderBottomLeftRadius: 8 } |
| bdr.rounded_l_xl | { borderTopLeftRadius: 12 , borderBottomLeftRadius: 12 } |
| bdr.rounded_l_2xl | { borderTopLeftRadius: 16 , borderBottomLeftRadius: 16 } |
| bdr.rounded_l_3xl | { borderTopLeftRadius: 24 , borderBottomLeftRadius: 24 } |
| bdr.rounded_l_full | { borderTopLeftRadius: 9999 , borderBottomLeftRadius: 9999 } |
| bdr.rounded_ss_none | { borderStartStartRadius: 0 } |
| bdr.rounded_ss_sm | { borderStartStartRadius: 2 } |
| bdr.rounded_ss | { borderStartStartRadius: 4 } |
| bdr.rounded_ss_md | { borderStartStartRadius: 6 } |
| bdr.rounded_ss_lg | { borderStartStartRadius: 8 } |
| bdr.rounded_ss_xl | { borderStartStartRadius: 12 } |
| bdr.rounded_ss_2xl | { borderStartStartRadius: 16 } |
| bdr.rounded_ss_3xl | { borderStartStartRadius: 24 } |
| bdr.rounded_ss_full | { borderStartStartRadius: 9999 } |
| bdr.rounded_se_none | { borderStartEndRadius: 0 } |
| bdr.rounded_se_sm | { borderStartEndRadius: 2 } |
| bdr.rounded_se | { borderStartEndRadius: 4 } |
| bdr.rounded_se_md | { borderStartEndRadius: 6 } |
| bdr.rounded_se_lg | { borderStartEndRadius: 8 } |
| bdr.rounded_se_xl | { borderStartEndRadius: 12 } |
| bdr.rounded_se_2xl | { borderStartEndRadius: 16 } |
| bdr.rounded_se_3xl | { borderStartEndRadius: 24 } |
| bdr.rounded_se_full | { borderStartEndRadius: 9999 } |
| bdr.rounded_ee_none | { borderEndEndRadius: 0 } |
| bdr.rounded_ee_sm | { borderEndEndRadius: 2 } |
| bdr.rounded_ee | { borderEndEndRadius: 4 } |
| bdr.rounded_ee_md | { borderEndEndRadius: 6 } |
| bdr.rounded_ee_lg | { borderEndEndRadius: 8 } |
| bdr.rounded_ee_xl | { borderEndEndRadius: 12 } |
| bdr.rounded_ee_2xl | { borderEndEndRadius: 16 } |
| bdr.rounded_ee_3xl | { borderEndEndRadius: 24 } |
| bdr.rounded_ee_full | { borderEndEndRadius: 9999 } |
| bdr.rounded_es_none | { borderEndStartRadius: 0 } |
| bdr.rounded_es_sm | { borderEndStartRadius: 2 } |
| bdr.rounded_es | { borderEndStartRadius: 4 } |
| bdr.rounded_es_md | { borderEndStartRadius: 6 } |
| bdr.rounded_es_lg | { borderEndStartRadius: 8 } |
| bdr.rounded_es_xl | { borderEndStartRadius: 12 } |
| bdr.rounded_es_2xl | { borderEndStartRadius: 16 } |
| bdr.rounded_es_3xl | { borderEndStartRadius: 24 } |
| bdr.rounded_es_full | { borderEndStartRadius: 9999 } |
| bdr.rounded_tl_none | { borderTopLeftRadius: 0 } |
| bdr.rounded_tl_sm | { borderTopLeftRadius: 2 } |
| bdr.rounded_tl | { borderTopLeftRadius: 4 } |
| bdr.rounded_tl_md | { borderTopLeftRadius: 6 } |
| bdr.rounded_tl_lg | { borderTopLeftRadius: 8 } |
| bdr.rounded_tl_xl | { borderTopLeftRadius: 12 } |
| bdr.rounded_tl_2xl | { borderTopLeftRadius: 16 } |
| bdr.rounded_tl_3xl | { borderTopLeftRadius: 24 } |
| bdr.rounded_tl_full | { borderTopLeftRadius: 9999 } |
| bdr.rounded_tr_none | { borderTopRightRadius: 0 } |
| bdr.rounded_tr_sm | { borderTopRightRadius: 2 } |
| bdr.rounded_tr | { borderTopRightRadius: 4 } |
| bdr.rounded_tr_md | { borderTopRightRadius: 6 } |
| bdr.rounded_tr_lg | { borderTopRightRadius: 8 } |
| bdr.rounded_tr_xl | { borderTopRightRadius: 12 } |
| bdr.rounded_tr_2xl | { borderTopRightRadius: 16 } |
| bdr.rounded_tr_3xl | { borderTopRightRadius: 24 } |
| bdr.rounded_tr_full | { borderTopRightRadius: 9999 } |
| bdr.rounded_br_none | { borderBottomRightRadius: 0 } |
| bdr.rounded_br_sm | { borderBottomRightRadius: 2 } |
| bdr.rounded_br | { borderBottomRightRadius: 4 } |
| bdr.rounded_br_md | { borderBottomRightRadius: 6 } |
| bdr.rounded_br_lg | { borderBottomRightRadius: 8 } |
| bdr.rounded_br_xl | { borderBottomRightRadius: 12 } |
| bdr.rounded_br_2xl | { borderBottomRightRadius: 16 } |
| bdr.rounded_br_3xl | { borderBottomRightRadius: 24 } |
| bdr.rounded_br_full | { borderBottomRightRadius: 9999 } |
| bdr.rounded_bl_none | { borderBottomLeftRadius: 0 } |
| bdr.rounded_bl_sm | { borderBottomLeftRadius: 2 } |
| bdr.rounded_bl | { borderBottomLeftRadius: 4 } |
| bdr.rounded_bl_md | { borderBottomLeftRadius: 6 } |
| bdr.rounded_bl_lg | { borderBottomLeftRadius: 8 } |
| bdr.rounded_bl_xl | { borderBottomLeftRadius: 12 } |
| bdr.rounded_bl_2xl | { borderBottomLeftRadius: 16 } |
| bdr.rounded_bl_3xl | { borderBottomLeftRadius: 24 } |
| bdr.rounded_bl_full | { borderBottomLeftRadius: 9999 } |
Custom Border Radii​
Custom properties are usually rendered using _(customValue)
| Object | Native Properties |
|---|---|
| bdr.rounded_(customRadius) | { borderRadius: customRadius } |
| bdr.rounded_s_(customRadius) | { borderStartStartRadius: customRadius , borderEndStartRadius: customRadius } |
| bdr.rounded_e_(customRadius) | { borderStartEndRadius: customRadius , borderEndEndRadius: customRadius } |
| bdr.rounded_t_(customRadius) | { borderTopLeftRadius: customRadius , borderTopRightRadius: customRadius } |
| bdr.rounded_r_(customRadius) | { borderTopRightRadius: customRadius , borderBottomRightRadius: customRadius } |
| bdr.rounded_b_(customRadius) | { borderBottomRightRadius: customRadius , borderBottomLeftRadius: customRadius } |
| bdr.rounded_l_(customRadius) | { borderTopLeftRadius: customRadius , borderBottomLeftRadius: customRadius } |
| bdr.rounded_ss_(customRadius) | { borderStartStartRadius: customRadius } |
| bdr.rounded_se_(customRadius) | { borderStartEndRadius: customRadius } |
| bdr.rounded_ee_(customRadius) | { borderEndEndRadius: customRadius } |
| bdr.rounded_es_(customRadius) | { borderEndStartRadius: customRadius } |
| bdr.rounded_tl_(customRadius) | { borderTopLeftRadius: customRadius } |
| bdr.rounded_tr_(customRadius) | { borderTopRightRadius: customRadius } |
| bdr.rounded_br_(customRadius) | { borderBottomRightRadius: customRadius } |
| bdr.rounded_bl_(customRadius) | { borderBottomLeftRadius: customRadius } |
tip
If the rounded border is not visible, try applying overflow: 'hidden' as well.