1# Border 2 3The border attributes are used to set border styles for components. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8> 9 10## border 11 12border(value: BorderOptions) 13 14Sets the border. 15 16**Widget capability**: This API can be used in ArkTS widgets since API version 9. 17 18**Atomic service API**: This API can be used in atomic services since API version 11. 19 20**System capability**: SystemCapability.ArkUI.ArkUI.Full 21 22**Parameters** 23 24| Name| Type | Mandatory| Description | 25| ------ | --------------------------------------- | ---- | ------------------------------------------------------------ | 26| value | [BorderOptions](#borderoptions) | Yes | Unified border style.<br>**NOTE**<br>The default value is **0**, indicating that the border is not displayed.<br>The border of a component is displayed above the content of its child components since API version 9.| 27 28## borderStyle 29 30borderStyle(value: BorderStyle | EdgeStyles) 31 32Sets the border style. 33 34**Widget capability**: This API can be used in ArkTS widgets since API version 9. 35 36**Atomic service API**: This API can be used in atomic services since API version 11. 37 38**System capability**: SystemCapability.ArkUI.ArkUI.Full 39 40**Parameters** 41 42| Name| Type | Mandatory| Description | 43| ------ | ------------------------------------------------------------ | ---- | -------------------------------------------------- | 44| value | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)<sup>9+</sup>| Yes | Border style.<br>Default value: **BorderStyle.Solid**| 45 46## borderWidth 47 48borderWidth(value: Length | EdgeWidths | LocalizedEdgeWidths) 49 50Sets the border width. 51 52**Widget capability**: This API can be used in ArkTS widgets since API version 9. 53 54**Atomic service API**: This API can be used in atomic services since API version 11. 55 56**System capability**: SystemCapability.ArkUI.ArkUI.Full 57 58**Parameters** 59 60| Name| Type | Mandatory| Description | 61| ------ | ------------------------------------------------------------ | ---- | ---------------------------------- | 62| value | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup> \| [LocalizedEdgeWidths](#localizededgewidths12)<sup>12+</sup> | Yes | Border width. Percentage values are not supported. | 63 64## borderColor 65 66borderColor(value: ResourceColor | EdgeColors | LocalizedEdgeColors) 67 68Sets the border color. 69 70**Widget capability**: This API can be used in ArkTS widgets since API version 9. 71 72**Atomic service API**: This API can be used in atomic services since API version 11. 73 74**System capability**: SystemCapability.ArkUI.ArkUI.Full 75 76**Parameters** 77 78| Name| Type | Mandatory| Description | 79| ------ | ------------------------------------------------------------ | ---- | -------------------------------------------- | 80| value | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup> \| [LocalizedEdgeColors](#localizededgecolors12)<sup>12+</sup> | Yes | Border color.<br>Default value: **Color.Black**| 81 82## borderRadius 83 84borderRadius(value: Length | BorderRadiuses | LocalizedBorderRadiuses) 85 86Sets the radius of the border rounded corners. The radius is restricted by the component size. The maximum value is half of the component width or height. 87 88**Widget capability**: This API can be used in ArkTS widgets since API version 9. 89 90**Atomic service API**: This API can be used in atomic services since API version 11. 91 92**System capability**: SystemCapability.ArkUI.ArkUI.Full 93 94**Parameters** 95 96| Name| Type | Mandatory| Description | 97| ------ | ------------------------------------------------------------ | ---- | -------------------------------------- | 98| value | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup> \| [LocalizedBorderRadiuses](#localizedborderradiuses12)<sup>12+</sup> | Yes | Radius of the border rounded corners. The value can be expressed as a percentage of the component's width.| 99 100## BorderOptions 101 102**Widget capability**: This API can be used in ArkTS widgets since API version 9. 103 104**Atomic service API**: This API can be used in atomic services since API version 11. 105 106| Name | Type | Mandatory| Description | 107| ------ | ------------------------------------------------------------ | ---- | ------------------ | 108| width | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup> \| [LocalizedEdgeWidths](#localizededgewidths12)<sup>12+</sup> | No | Border width. | 109| color | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup> \| [LocalizedEdgeColors](#localizededgecolors12)<sup>12+</sup> | No | Border color. | 110| radius | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup> \| [LocalizedBorderRadiuses](#localizedborderradiuses12)<sup>12+</sup> | No | Radius of the border rounded corners.| 111| style | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)<sup>9+</sup>| No | Sets the border. | 112| dashGap<sup>12+</sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [EdgeWidths](#edgewidths9) \| [LocalizedEdgeWidths](#localizededgewidths12) | No | Gap between dashed line segments. It takes effect when the border style is set to dashed.<br>Percentage values are not supported. | 113| dashWidth<sup>12+</sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [EdgeWidths](#edgewidths9) \| [LocalizedEdgeWidths](#localizededgewidths12) | No | Width of dashed line segments. It takes effect when the border style is set to dashed.<br>Percentage values are not supported. | 114 115## EdgeWidths<sup>9+</sup> 116 117To reference this object, at least one parameter must be passed. 118 119**Widget capability**: This API can be used in ArkTS widgets since API version 9. 120 121**Atomic service API**: This API can be used in atomic services since API version 11. 122 123| Name | Type | Mandatory | Description | 124| ------ | ---------------------------- | ---- | ------- | 125| left | [Length](ts-types.md#length) | No | Width of the left border.| 126| right | [Length](ts-types.md#length) | No | Width of the right border.| 127| top | [Length](ts-types.md#length) | No | Width of the top border.| 128| bottom | [Length](ts-types.md#length) | No | Width of the bottom border.| 129 130## LocalizedEdgeWidths<sup>12+</sup> 131 132Represents the edge widths in different directions of a component. 133 134To reference this object, at least one parameter must be passed. 135 136**Widget capability**: This API can be used in ArkTS widgets since API version 12. 137 138| Name | Type | Mandatory | Description | 139| ------ | ---------------------------- | ---- | ------- | 140| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Width of the left border.<br>Width of the right border for right-to-left scripts.| 141| end | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Width of the right border.<br>Width of the left border for right-to-left scripts.| 142| top | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Width of the top border.| 143| bottom | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Width of the bottom border.| 144 145## EdgeColors<sup>9+</sup> 146 147To reference this object, at least one parameter must be passed. 148 149**Widget capability**: This API can be used in ArkTS widgets since API version 9. 150 151**Atomic service API**: This API can be used in atomic services since API version 11. 152 153| Name | Type | Mandatory | Description | 154| ------ | ---------------------------------------- | ---- | ------- | 155| left | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the left border.| 156| right | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the right border.| 157| top | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the top border.| 158| bottom | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the bottom border.| 159 160## LocalizedEdgeColors<sup>12+</sup> 161 162Describes the edge colors of a component. 163 164To reference this object, at least one parameter must be passed. 165 166**Widget capability**: This API can be used in ArkTS widgets since API version 12. 167 168**Atomic service API**: This API can be used in atomic services since API version 12. 169 170| Name | Type | Mandatory | Description | 171| ------ | ---------------------------------------- | ---- | ------- | 172| start | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the left border.<br>Color of the right border for right-to-left scripts.| 173| end | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the right border.<br>Color of the left border for right-to-left scripts.| 174| top | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the top border.| 175| bottom | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the bottom border.| 176 177## BorderRadiuses<sup>9+</sup> 178 179To reference this object, at least one parameter must be passed. 180 181**Widget capability**: This API can be used in ArkTS widgets since API version 9. 182 183**Atomic service API**: This API can be used in atomic services since API version 11. 184 185| Name | Type | Mandatory | Description | 186| ----------- | ---------------------------- | ---- | -------- | 187| topLeft | [Length](ts-types.md#length) | No | Radius of the upper-left rounded corner.| 188| topRight | [Length](ts-types.md#length) | No | Radius of the upper-right rounded corner.| 189| bottomLeft | [Length](ts-types.md#length) | No | Radius of the lower-left rounded corner.| 190| bottomRight | [Length](ts-types.md#length) | No | Radius of the lower-right rounded corner.| 191 192## LocalizedBorderRadiuses<sup>12+</sup> 193 194Represents the radius of the rounded corners of the component. 195 196To reference this object, at least one parameter must be passed. 197 198**Widget capability**: This API can be used in ArkTS widgets since API version 12. 199 200**Atomic service API**: This API can be used in atomic services since API version 12. 201 202| Name | Type | Mandatory | Description | 203| ----------- | ---------------------------- | ---- | -------- | 204| topStart | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)<sup>12+</sup> | No | Radius of the upper-left rounded corner.<br>Radius of the upper-right rounded corner for right-to-left scripts.| 205| topEnd | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)<sup>12+</sup> | No | Radius of the upper-right rounded corner.<br>Radius of the upper-left rounded corner for right-to-left scripts.| 206| bottomStart | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)<sup>12+</sup> | No | Radius of the lower-left rounded corner.<br>Radius of the lower-right rounded corner for right-to-left scripts.| 207| bottomEnd | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)<sup>12+</sup> | No | Radius of the lower-right rounded corner.<br>Radius of the lower-left rounded corner for right-to-left scripts.| 208 209## EdgeStyles<sup>9+</sup> 210 211To reference this object, at least one parameter must be passed. 212 213**Widget capability**: This API can be used in ArkTS widgets since API version 9. 214 215**Atomic service API**: This API can be used in atomic services since API version 11. 216 217| Name | Type | Mandatory | Description | 218| ------ | ---------------------------------------- | ---- | ------- | 219| left | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the left border.| 220| right | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the right border.| 221| top | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the top border.| 222| bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the bottom border.| 223 224## Example 225 226### Example 1 227 228```ts 229// xxx.ets 230@Entry 231@Component 232struct BorderExample { 233 build() { 234 Column() { 235 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 236 // Dashed border 237 Text('dashed') 238 .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) 239 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 240 // Dotted border 241 Text('dotted') 242 .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) 243 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 244 }.width('100%').height(150) 245 246 Text('.border') 247 .fontSize(50) 248 .width(300) 249 .height(300) 250 .border({ 251 width: { left: 3, right: 6, top: 10, bottom: 15 }, 252 color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green }, 253 radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, 254 style: { 255 left: BorderStyle.Dotted, 256 right: BorderStyle.Dotted, 257 top: BorderStyle.Solid, 258 bottom: BorderStyle.Dashed 259 } 260 }).textAlign(TextAlign.Center) 261 } 262 } 263} 264``` 265 266 267 268### Example 2 269```ts 270// xxx.ets 271// The width, radius, and color attributes of border use the LocalizedEdgeWidths and LocalizedEdgeColors types. 272 273import { LengthMetrics } from '@kit.ArkUI'; 274@Entry 275@Component 276struct BorderExample { 277 build() { 278 Column() { 279 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 280 // Dashed border 281 Text('dashed') 282 .borderStyle(BorderStyle.Dashed) 283 .borderWidth(5) 284 .borderColor(0xAFEEEE) 285 .borderRadius(10) 286 .width(120) 287 .height(120) 288 .textAlign(TextAlign.Center) 289 .fontSize(16) 290 // Dotted border 291 Text('dotted') 292 .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) 293 .width(120) 294 .height(120) 295 .textAlign(TextAlign.Center) 296 .fontSize(16) 297 }.width('100%').height(150) 298 299 Text('.border') 300 .fontSize(50) 301 .width(300) 302 .height(300) 303 .border({ 304 width: { 305 start: LengthMetrics.vp(3), 306 end: LengthMetrics.vp(6), 307 top: LengthMetrics.vp(10), 308 bottom: LengthMetrics.vp(15) 309 }, 310 color: { start: '#e3bbbb', end: Color.Blue, top: Color.Red, bottom: Color.Green }, 311 radius: { 312 topStart: LengthMetrics.vp(10), 313 topEnd: LengthMetrics.vp(20), 314 bottomStart: LengthMetrics.vp(40), 315 bottomEnd: LengthMetrics.vp(80) 316 }, 317 style: { 318 left: BorderStyle.Dotted, 319 right: BorderStyle.Dotted, 320 top: BorderStyle.Solid, 321 bottom: BorderStyle.Dashed 322 } 323 }) 324 .textAlign(TextAlign.Center) 325 } 326 } 327} 328``` 329 330The following shows how the example is represented with left-to-right scripts. 331 332 333 334The following shows how the example is represented with right-to-left scripts. 335 336 337
