# 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 }) ```