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> The border of a component is displayed above the content of its child components since API version 9. 10 11 12## Attributes 13 14| Name | Type | Description | 15| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 16| border | {<br>width?: [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup>,<br>color?: [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup>,<br>radius?: [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup>,<br>style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)<sup>9+</sup><br>} | Unified border style.<br>- **width**: border width.<br>- **color**: border color.<br>- **radius**: radius of the rounded corner of the border.<br>- **style**: border style.<br>Since API version 9, this API is supported in ArkTS widgets.| 17| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)<sup>9+</sup> | Border style.<br>Default value: **BorderStyle.Solid**<br>Since API version 9, this API is supported in ArkTS widgets.| 18| borderWidth | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup> | Border width. The percentage format is not supported.<br>Since API version 9, this API is supported in ArkTS widgets.| 19| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup> | Border color.<br>Default value: **Color.Black**<br>Since API version 9, this API is supported in ArkTS widgets.| 20| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup> | Border radius. The percentage format is not supported.<br>Since API version 9, this API is supported in ArkTS widgets.| 21 22## EdgeWidths<sup>9+</sup> 23 24To reference this object, at least one parameter must be passed. 25 26| Name | Type | Mandatory | Description | 27| ------ | ---------------------------- | ---- | ------- | 28| left | [Length](ts-types.md#length) | No | Width of the left border.| 29| right | [Length](ts-types.md#length) | No | Width of the right border.| 30| top | [Length](ts-types.md#length) | No | Width of the top border.| 31| bottom | [Length](ts-types.md#length) | No | Width of the bottom border.| 32 33## EdgeColors<sup>9+</sup> 34 35To reference this object, at least one parameter must be passed. 36 37| Name | Type | Mandatory | Description | 38| ------ | ---------------------------------------- | ---- | ------- | 39| left | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the left border.| 40| right | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the right border.| 41| top | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the top border.| 42| bottom | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the bottom border.| 43 44## BorderRadiuses<sup>9+</sup> 45 46To reference this object, at least one parameter must be passed. 47 48| Name | Type | Mandatory | Description | 49| ----------- | ---------------------------- | ---- | -------- | 50| topLeft | [Length](ts-types.md#length) | No | Radius of the upper-left rounded corner.| 51| topRight | [Length](ts-types.md#length) | No | Radius of the upper-right rounded corner.| 52| bottomLeft | [Length](ts-types.md#length) | No | Radius of the lower-left rounded corner.| 53| bottomRight | [Length](ts-types.md#length) | No | Radius of the lower-right rounded corner.| 54 55## EdgeStyles<sup>9+</sup> 56 57To reference this object, at least one parameter must be passed. 58 59| Name | Type | Mandatory | Description | 60| ------ | ---------------------------------------- | ---- | ------- | 61| left | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the left border.| 62| right | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the right border.| 63| top | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the top border.| 64| bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the bottom border.| 65 66## Example 67 68```ts 69// xxx.ets 70@Entry 71@Component 72struct BorderExample { 73 build() { 74 Column() { 75 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 76 // Dashed border 77 Text('dashed') 78 .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) 79 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 80 // Dotted border 81 Text('dotted') 82 .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) 83 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 84 }.width('100%').height(150) 85 86 Text('.border') 87 .fontSize(50) 88 .width(300) 89 .height(300) 90 .border({ 91 width: { left: '5lpx', right: '10lpx', top: '20lpx', bottom: '30lpx' }, 92 color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green }, 93 radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, 94 style: { 95 left: BorderStyle.Dotted, 96 right: BorderStyle.Dotted, 97 top: BorderStyle.Solid, 98 bottom: BorderStyle.Dashed 99 } 100 }).textAlign(TextAlign.Center) 101 } 102 } 103} 104``` 105 106 107
