Name	Type	Mandatory	Description
value	BorderOptions	Yes	Unified border style. NOTE The default value is 0, indicating that no border is displayed. Since API version 9, the parent node's border is displayed above child node content.

Name	Type	Mandatory	Description
value	BorderStyle \| EdgeStyles⁹⁺	Yes	Border style. Default value: BorderStyle.Solid

Name	Type	Mandatory	Description
value	Length \| EdgeWidths⁹⁺ \| LocalizedEdgeWidths¹²⁺	Yes	Border width. This parameter cannot be set in percentage.

Name	Type	Mandatory	Description
value	ResourceColor \| EdgeColors⁹⁺ \| LocalizedEdgeColors¹²⁺	Yes	Border color. Default value: Color.Black

Name	Type	Mandatory	Description
value	Length \| BorderRadiuses⁹⁺ \| LocalizedBorderRadiuses¹²⁺	Yes	Radius of the border corners. The value can be expressed as a percentage of the component's width. When combined with the clip attribute, this setting clips child components to prevent them from extending beyond the component's boundaries.

Return value

Type	Description
T	Current component.

borderRadius²²⁺

borderRadius(value: Length | BorderRadiuses | LocalizedBorderRadiuses, type?: RenderStrategy): T

Sets the border corner radius and the rendering strategy for rounded corners.

Widget capability: This API can be used in ArkTS widgets since API version 22.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Length \| BorderRadiuses \| LocalizedBorderRadiuses	Yes	Radius of the border corners. The value can be expressed as a percentage of the component's width. When combined with the clip attribute, this setting clips child components to prevent them from extending beyond the component's boundaries.
type	RenderStrategy	No	Rendering strategy for drawing rounded corners. Default value: RenderStrategy.FAST.

Name

Type

Mandatory

Description

value

Length | BorderRadiuses | LocalizedBorderRadiuses

Yes

Radius of the border corners. The value can be expressed as a percentage of the component's width. When combined with the clip attribute, this setting clips child components to prevent them from extending beyond the component's boundaries.

type

RenderStrategy

Rendering strategy for drawing rounded corners.

Default value: RenderStrategy.FAST.

Return value

Type	Description
T	Current component.

Example

[h2]Example 1: Setting Basic Styles

This example shows how to set the border width, color, border radius, and styles such as dotted or dashed lines.

// xxx.ets
@Entry
@Component
struct BorderExample {
  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        // Dashed border
        Text('dashed')
          .borderStyle(BorderStyle.Dashed)
          .borderWidth(5)
          .borderColor(0xAFEEEE)
          .borderRadius(10)
          .width(120)
          .height(120)
          .textAlign(TextAlign.Center)
          .fontSize(16)
        // Dotted border
        Text('dotted')
          .border({
            width: 5,
            color: 0x317AF7,
            radius: 10,
            style: BorderStyle.Dotted
          })
          .width(120)
          .height(120)
          .textAlign(TextAlign.Center)
          .fontSize(16)
      }.width('100%').height(150)

      Text('.border')
        .fontSize(50)
        .width(300)
        .height(300)
        .border({
          width: {
            left: 3,
            right: 6,
            top: 10,
            bottom: 15
          },
          color: {
            left: '#e3bbbb',
            right: Color.Blue,
            top: Color.Red,
            bottom: Color.Green
          },
          radius: {
            topLeft: 10,
            topRight: 20,
            bottomLeft: 40,
            bottomRight: 80
          },
          style: {
            left: BorderStyle.Dotted,
            right: BorderStyle.Dotted,
            top: BorderStyle.Solid,
            bottom: BorderStyle.Dashed
          }
        })
        .textAlign(TextAlign.Center)
    }
  }
}

[h2]Example 2: Setting the Border Width Type and Border Color

In this example, the width, radius, and color properties of the border attribute use the LocalizedEdgeWidths and LocalizedEdgeColors types.

// xxx.ets
import { LengthMetrics } from '@kit.ArkUI';

@Entry
@Component
struct BorderExample {
  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        // Dashed border
        Text('dashed')
          .borderStyle(BorderStyle.Dashed)
          .borderWidth(5)
          .borderColor(0xAFEEEE)
          .borderRadius(10)
          .width(120)
          .height(120)
          .textAlign(TextAlign.Center)
          .fontSize(16)
        // Dotted border
        Text('dotted')
          .border({
            width: 5,
            color: 0x317AF7,
            radius: 10,
            style: BorderStyle.Dotted
          })
          .width(120)
          .height(120)
          .textAlign(TextAlign.Center)
          .fontSize(16)
      }.width('100%').height(150)

      Text('.border')
        .fontSize(50)
        .width(300)
        .height(300)
        .border({
          width: {
            start: LengthMetrics.vp(3),
            end: LengthMetrics.vp(6),
            top: LengthMetrics.vp(10),
            bottom: LengthMetrics.vp(15)
          },
          color: {
            start: '#e3bbbb',
            end: Color.Blue,
            top: Color.Red,
            bottom: Color.Green
          },
          radius: {
            topStart: LengthMetrics.vp(10),
            topEnd: LengthMetrics.vp(20),
            bottomStart: LengthMetrics.vp(40),
            bottomEnd: LengthMetrics.vp(80)
          },
          style: {
            left: BorderStyle.Dotted,
            right: BorderStyle.Dotted,
            top: BorderStyle.Solid,
            bottom: BorderStyle.Dashed
          }
        })
        .textAlign(TextAlign.Center)
    }
  }
}

The following shows how the example is represented with left-to-right scripts.

The following shows how the example is represented with right-to-left scripts.

[h2]Example 3: Configuring Offscreen Rounded Corners

This example demonstrates how to set the rendering strategy for drawing rounded corners on components, supported since API version 22.

// xxx.ets
@Entry
@Component
struct RenderStrategyExample {
  build() {
    NavDestination() {
      Column({ space: 20 }) {
        Stack() {
          Column()
            .width(320)
            .height(320)
            .backgroundColor(Color.Black)

          Stack() {
            Stack() {
              Scroll(new Scroller()) {
                Image($r('app.media.startIcon'))
                  .width('100%')
                  .height('200%')
              }

              Column()
                .blur(50)
                .width(300)
                .height(100)
                .position({ x: 0, y: 0 })
            }
          }
          .width(300)
          .height(300)
          .backgroundColor(Color.Pink)
          .borderRadius(50, RenderStrategy.FAST)
          .clip(true)
        }

        Stack() {
          Column()
            .width(320)
            .height(320)
            .backgroundColor(Color.Black)

          Stack() {
            Stack() {
              Scroll(new Scroller()) {
                Image($r('app.media.startIcon'))
                  .width('100%')
                  .height('200%')
              }

              Column()
                .blur(50)
                .width(300)
                .height(100)
                .position({ x: 0, y: 0 })
            }
          }
          .width(300)
          .height(300)
          .backgroundColor(Color.Pink)
          .borderRadius(50, RenderStrategy.OFFSCREEN)
          .clip(true)
        }
      }
    }
    .width('100%')
    .height('100%')
  }
}

The following illustration compares online rendering (top) with offscreen rendering (bottom) modes.

目录

Border Styling

border

borderStyle

borderWidth

borderColor

borderRadius

borderRadius²²⁺

Example

[h2]Example 1: Setting Basic Styles

[h2]Example 2: Setting the Border Width Type and Border Color

[h2]Example 3: Configuring Offscreen Rounded Corners

目录

Border Styling

border

borderStyle

borderWidth

borderColor

borderRadius

borderRadius22+

Example

[h2]Example 1: Setting Basic Styles

[h2]Example 2: Setting the Border Width Type and Border Color

[h2]Example 3: Configuring Offscreen Rounded Corners

borderRadius²²⁺