Harmony OS Next

Border Usage and Individual Direction in HarmonyOS NextSettings

The following details the implementation of component border styling in relevant development environments:

Border Style Setting Overview

Border styling has been supported since API Version 7, with subsequent versions adding support for different application scenarios (such as ArkTS cards and meta-services).

border Interface

Function

:

  border(value: BorderOptions)

sets unified border styles.

• Default border width is 0 (invisible)

• Since API Version 9, parent node borders display above child node content

Support

:

• ArkTS Cards: Supported since API version 9

• Meta Services: Supported since API version 11

  • System Capability: SystemCapability.ArkUI.ArkUI.Full

borderStyle Interface

Function

:

  borderStyle(value: BorderStyle | EdgeStyles)

sets border line styles.

• Default value: BorderStyle.Solid

Support

:

• ArkTS Cards: Supported since API version 9

• Meta Services: Supported since API version 11

  • System Capability: SystemCapability.ArkUI.ArkUI.Full

borderWidth Interface

Function

:

  borderWidth(value: Length | EdgeWidths | LocalizedEdgeWidths)

sets border widths.

• Percentage values not supported

Support

:

• ArkTS Cards: Supported since API version 9

• Meta Services: Supported since API version 11

  • System Capability: SystemCapability.ArkUI.ArkUI.Full

borderColor Interface

Function

:

  borderColor(value: ResourceColor | EdgeColors | LocalizedEdgeColors)

sets border colors.

• Default value: Color.Black

Support

:

• ArkTS Cards: Supported since API version 9

• Meta Services: Supported since API version 11

  • System Capability: SystemCapability.ArkUI.ArkUI.Full

borderRadius Interface

Function

:

  borderRadius(value: Length | BorderRadiuses | LocalizedBorderRadiuses)

sets border radii.

• Maximum radius limited to half of component width/height
• Supports percentage values (relative to component width)

• Use with .clip to prevent child components from overflowing

Support

:

• ArkTS Cards: Supported since API version 9

• Meta Services: Supported since API version 11

  • System Capability: SystemCapability.ArkUI.ArkUI.Full

These interfaces provide comprehensive and flexible control over component border styling across different application scenarios.

Individual Border Direction Setting Example

Row().border({
    width: { bottom: 1 }, // Set only bottom border width
    color: { bottom: 'rgba(153, 159, 181, 0.15)' }, // Set only bottom border color
})