Interface BorderProps

Accepted values for Borders.

If you are looking for border color, refer to ColorProps

Basically, all the well-known HTML properties are present, but their values are predefined.

See below an example using some of the properties:

Example:

<View
   borderWidth='hairline'
   borderColor="neutral-900"
   borderRadius="small"
>
 <Text>My awesome text</Text>
</View>

Hierarchy

Properties

border? borderBottomStyle? borderBottomWidth? borderLeftStyle? borderLeftWidth? borderRadius? borderRadiusLeftBottom? borderRadiusLeftTop? borderRadiusRightBottom? borderRadiusRightTop? borderRightStyle? borderRightWidth? borderStyle? borderTopStyle? borderTopWidth? borderWidth?

Properties

Optional border

border?: string

borderColor sets the color of borders in the design system, allowing you to control the visual appearance of elements' outlines.

Check the token table to know which values to use

Example:

   <borderColor="neutral-900" />

Optional borderBottomStyle

borderBottomStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderBottomWidth

borderBottomWidth?: string

borderBottomWidth focuses on adjusting the thickness of the bottom border in the design system, allowing you to fine-tune the visual appearance of the bottom border for elements.

Check the token table to know which values to use

Example:

   <borderBottomWidth="hairline" />

Optional borderLeftStyle

borderLeftStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderLeftWidth

borderLeftWidth?: string

borderBottomWidth is used to control the thickness of the bottom border in the design system, giving you control over the visual appearance of the bottom edges of elements.

Check the token table to know which values to use

Example:

   <borderBottomWidth="hairline" />

Optional borderRadius

borderRadius?: string

borderRadius defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadius="micro" />

Optional borderRadiusLeftBottom

borderRadiusLeftBottom?: string

borderRadiusLeftBottom defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadiusLeftBottom="micro" />

Optional borderRadiusLeftTop

borderRadiusLeftTop?: string

borderRadiusLeftTop defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadiusLeftTop="micro" />

Optional borderRadiusRightBottom

borderRadiusRightBottom?: string

borderRadiusRightBottom defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadiusRightBottom="micro" />

Optional borderRadiusRightTop

borderRadiusRightTop?: string

borderRadiusRightTop defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadiusRightTop="micro" />

Optional borderRightStyle

borderRightStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderRightWidth

borderRightWidth?: string

borderRightWidth is used to control the thickness of the right border in the design system, giving you control over the visual appearance of the right edges of elements.

Check the token table to know which values to use

Example:

   <borderRightWidth="hairline" />

Optional borderStyle

borderStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderTopStyle

borderTopStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderTopWidth

borderTopWidth?: string

borderTopWidth specifically adjusts the thickness of the top border in the design system, giving you precise control over the visual aspect of the top border of elements.

Check the token table to know which values to use

Example:

   <borderTopWidth="hairline" />

Optional borderWidth

borderWidth?: string

The borderWidth determines the thickness of borders in the design system. It's a crucial property for defining the visual weight of elements.

Check the token table to know which values to use

Example:

   <borderWidth="hairline" />

Settings

Member Visibility

Theme

On This Page