Skip to main content
Version: Next

Border Width

Border Width

Utilities for controlling the width of an element's borders.

NamespaceOutput
border{ borderWidth: 1 }
border-0{ borderWidth: 0 }
border-2{ borderWidth: 2 }
border-4{ borderWidth: 4 }
border-8{ borderWidth: 8 }
border-t{ borderTopWidth: 1 }
border-r{ borderRightWidth: 1 }
border-b{ borderBottomWidth: 1 }
border-l{ borderLeftWidth: 1 }
border-t-0{borderTopWidth: 0}
border-r-0{borderRightWidth: 0}
border-b-0{borderBottomWidth: 0}
border-l-0{borderLeftWidth: 0}
border-t-2{borderTopWidth: 2}
border-r-2{borderRightWidth: 2}
border-b-2{borderBottomWidth: 2}
border-l-2{borderLeftWidth: 2}
border-t-4{borderTopWidth: 4}
border-r-4{borderRightWidth: 4}
border-b-4{borderBottomWidth: 4}
border-l-4{borderLeftWidth: 4}
border-t-8{borderTopWidth: 8}
border-r-8{borderRightWidth: 8}
border-b-8{borderBottomWidth: 8}
border-l-8{borderLeftWidth: 8}

Custom Border Width

If you didn't get suitable border width for your project app.

Create Pre-defined

You can define your font size by adding in CustomTheme.js file:

export default {
border: {
width: {
"super-big": 120,
},
},
};

Usage

apply("border-super-big");
apply("border-t-super-big");
apply("border-r-super-big");
apply("border-b-super-big");
apply("border-l-super-big");

Example Output

{
borderWidth: 120;
}
{
borderTopWidth: 120;
}
{
borderRightWidth: 120;
}
{
borderBottomWidth: 120;
}
{
borderLeftWidth: 120;
}