1# Outline
2
3You can set outline attributes for components.
4
5>  **NOTE**
6>
7>  This feature is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
8
9## outline
10
11outline(value: OutlineOptions)
12
13Sets the outline attributes in one declaration.
14
15**Widget capability**: This API can be used in ArkTS widgets since API version 11.
16
17**Atomic service API**: This API can be used in atomic services since API version 12.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21**Parameters**
22
23| Name| Type                                     | Mandatory| Description|
24| ------ | ----------------------------------------- | ---- | ---- |
25| value  | [OutlineOptions](#outlineoptions) | Yes  |   Outline attributes.  |
26
27## OutlineStyle<sup>11+</sup>
28
29**Widget capability**: This API can be used in ArkTS widgets since API version 11.
30
31**Atomic service API**: This API can be used in atomic services since API version 12.
32
33**System capability**: SystemCapability.ArkUI.ArkUI.Full
34
35| Name    | Description                           |
36| ------ | ----------------------------- |
37| SOLID  | Solid border.                     |
38| DASHED | Dashed border.                |
39| DOTTED | Dotted border. The radius of a dot is half of **outlineWidth**.|
40
41## outlineStyle
42
43outlineStyle(value: OutlineStyle | EdgeOutlineStyles)
44
45Sets the style of the outline.
46
47**Widget capability**: This API can be used in ArkTS widgets since API version 11.
48
49**Atomic service API**: This API can be used in atomic services since API version 12.
50
51**System capability**: SystemCapability.ArkUI.ArkUI.Full
52
53**Parameters**
54
55| Name| Type                                                        | Mandatory| Description                                                 |
56| ------ | ------------------------------------------------------------ | ---- | ----------------------------------------------------- |
57| value  | [OutlineStyle](#outlinestyle11) \| [EdgeOutlineStyles](#edgeoutlinestyles) | Yes  | Outline style.<br>Default value: **OutlineStyle.SOLID**|
58
59## outlineWidth
60
61outlineWidth(value: Dimension | EdgeOutlineWidths)
62
63Sets the thickness of the outline.
64
65**Widget capability**: This API can be used in ArkTS widgets since API version 11.
66
67**Atomic service API**: This API can be used in atomic services since API version 12.
68
69**System capability**: SystemCapability.ArkUI.ArkUI.Full
70
71**Parameters**
72
73| Name| Type                                                        | Mandatory| Description                                                        |
74| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
75| value  | [Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](#edgeoutlinewidths) | Yes  | Outline thickness. This parameter cannot be set in percentage.<br>Default value: **0**.|
76
77## outlineColor
78
79outlineColor(value: ResourceColor | EdgeColors)
80
81Sets the color of the outline.
82
83**Widget capability**: This API can be used in ArkTS widgets since API version 11.
84
85**Atomic service API**: This API can be used in atomic services since API version 12.
86
87**System capability**: SystemCapability.ArkUI.ArkUI.Full
88
89**Parameters**
90
91| Name| Type                                                        | Mandatory| Description                                            |
92| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------ |
93| value  | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors) | Yes  | Outline color.<br>Default value: **Color.Black**|
94
95## outlineRadius
96
97outlineRadius(value: Dimension | OutlineRadiuses)
98
99Sets the rounded corner radius of the outline.
100
101**Widget capability**: This API can be used in ArkTS widgets since API version 11.
102
103**Atomic service API**: This API can be used in atomic services since API version 12.
104
105**System capability**: SystemCapability.ArkUI.ArkUI.Full
106
107**Parameters**
108
109| Name| Type                                                        | Mandatory| Description                                                        |
110| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
111| value  | [Dimension](ts-types.md#dimension10) \| [OutlineRadiuses](#outlineradiuses) | Yes  | Rounded corner radius of the outline. This parameter cannot be set in percentage.<br>Default value: **0**<br>Maximum effective value: Component width/2 + outlineWidth or component height/2 + outlineWidth|
112
113## OutlineOptions
114
115**Atomic service API**: This API can be used in atomic services since API version 12.
116
117**Widget capability**: This API can be used in ArkTS widgets since API version 12.
118
119| Name  | Type                  |Mandatory                                     | Description                                                        |
120| ------ | ----------------------|-------------------------------------- | ------------------------------------------------------------ |
121| width  | [Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](#edgeoutlinewidths) | No| Outline thickness. This parameter cannot be set in percentage.<br>Default value: **0**|
122| color  | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors) \| [LocalizedEdgeColors](#localizededgecolors12)<sup>12+</sup> |No| Outline color.<br>Default value: **Color.Black**                  |
123| radius | [Dimension](ts-types.md#dimension10) \| [OutlineRadiuses](#outlineradiuses) | No| Rounded corner radius of the outline. This parameter cannot be set in percentage.<br>Default value: **0**<br>Maximum effective value: Component width/2 + outlineWidth or component height/2 + outlineWidth|
124| style  | [OutlineStyle](#outlinestyle11) \| [EdgeOutlineStyles](#edgeoutlinestyles) |No| Outline style.<br>Default value: **OutlineStyle.SOLID**           |
125
126## EdgeOutlineWidths
127
128To reference this object, at least one parameter must be passed.
129
130**Atomic service API**: This API can be used in atomic services since API version 12.
131
132**Widget capability**: This API can be used in ArkTS widgets since API version 12.
133
134| Name    | Type                        | Mandatory  | Description     |
135| ------ | ---------------------------- | ---- | ------- |
136| left   | [Dimension](ts-types.md#dimension10) | No   | Thickness of the left outline.|
137| right  | [Dimension](ts-types.md#dimension10) | No   | Thickness of the right outline.|
138| top    | [Dimension](ts-types.md#dimension10) | No   | Thickness of the top outline.|
139| bottom | [Dimension](ts-types.md#dimension10) | No   | Thickness of the bottom outline.|
140
141## EdgeColors
142
143To reference this object, at least one parameter must be passed.
144
145**Atomic service API**: This API can be used in atomic services since API version 11.
146
147**System capability**: SystemCapability.ArkUI.ArkUI.Full
148
149**Widget capability**: This API can be used in ArkTS widgets since API version 12.
150
151| Name    | Type                                    | Mandatory  | Description     |
152| ------ | ---------------------------------------- | ---- | ------- |
153| left   | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the left outline.|
154| right  | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the right outline.|
155| top    | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the top outline.|
156| bottom | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the bottom outline.|
157
158## LocalizedEdgeColors<sup>12+</sup>
159
160To reference this object, at least one parameter must be passed.
161
162**Atomic service API**: This API can be used in atomic services since API version 12.
163
164**Widget capability**: This API can be used in ArkTS widgets since API version 12.
165
166| Name    | Type                                    | Mandatory  | Description     |
167| ------ | ---------------------------------------- | ---- | ------- |
168| left   | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the left outline.<br>Color of the right outline for right-to-left scripts.|
169| right  | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the right outline.<br>Color of the left outline for right-to-left scripts.|
170| top    | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the top outline.|
171| bottom | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the bottom outline.|
172
173## OutlineRadiuses
174
175To reference this object, at least one parameter must be passed.
176
177**Atomic service API**: This API can be used in atomic services since API version 12.
178
179**Widget capability**: This API can be used in ArkTS widgets since API version 12.
180
181| Name         | Type                        | Mandatory  | Description      |
182| ----------- | ---------------------------- | ---- | -------- |
183| topLeft     | [Dimension](ts-types.md#dimension10) | No   | Radius of the upper-left rounded corner.|
184| topRight    | [Dimension](ts-types.md#dimension10) | No   | Radius of the upper-right rounded corner.|
185| bottomLeft  | [Dimension](ts-types.md#dimension10) | No   | Radius of the lower-left rounded corner.|
186| bottomRight | [Dimension](ts-types.md#dimension10) | No   | Radius of the lower-right rounded corner.|
187
188## EdgeOutlineStyles
189
190To reference this object, at least one parameter must be passed.
191
192**Atomic service API**: This API can be used in atomic services since API version 12.
193
194**Widget capability**: This API can be used in ArkTS widgets since API version 12.
195
196| Name    | Type                                    | Mandatory  | Description     |
197| ------ | ---------------------------------------- | ---- | ------- |
198| left   | [OutlineStyle](#outlinestyle11) | No   | Style of the left outline.|
199| right  | [OutlineStyle](#outlinestyle11) | No   | Style of the right outline.|
200| top    | [OutlineStyle](#outlinestyle11) | No   | Style of the top outline.|
201| bottom | [OutlineStyle](#outlinestyle11) | No   | Style of the bottom outline.|
202
203## Example
204
205### Example 1
206
207```ts
208// xxx.ets
209@Entry
210@Component
211struct OutlineExample {
212  build() {
213    Column() {
214      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
215        // Dashed line
216        Text('DASHED')
217          .backgroundColor(Color.Pink)
218          .outlineStyle(OutlineStyle.DASHED).outlineWidth(5).outlineColor(0xAFEEEE).outlineRadius(10)
219          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
220        // Dotted line
221        Text('DOTTED')
222          .backgroundColor(Color.Pink)
223          .outline({ width: 5, color: 0x317AF7, radius: 10, style: OutlineStyle.DOTTED })
224          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
225      }.width('100%').height(150)
226
227      Text('.outline')
228        .backgroundColor(Color.Pink)
229        .fontSize(50)
230        .width(300)
231        .height(300)
232        .outline({
233          width: { left: 3, right: 6, top: 10, bottom: 15 },
234          color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
235          radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
236          style: {
237            left: OutlineStyle.DOTTED,
238            right: OutlineStyle.DOTTED,
239            top: OutlineStyle.SOLID,
240            bottom: OutlineStyle.DASHED
241          }
242        }).textAlign(TextAlign.Center)
243    }
244  }
245}
246```
247
248![en-us_image_0000001219982706](figures/en-us_image_0000001219982706.png)
249
250### Example 2
251```ts
252// xxx.ets
253// The color parameter of the outline attribute is of the LocalizedEdgeColors type.
254
255@Entry
256@Component
257struct OutlineExample {
258  build() {
259    Column() {
260      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
261        // Dashed line
262        Text('DASHED')
263          .backgroundColor(Color.Pink)
264          .outlineStyle(OutlineStyle.DASHED).outlineWidth(5).outlineColor(0xAFEEEE).outlineRadius(10)
265          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
266        // Dotted line
267        Text('DOTTED')
268          .backgroundColor(Color.Pink)
269          .outline({ width: 5, color: 0x317AF7, radius: 10, style: OutlineStyle.DOTTED })
270          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
271      }.width('100%').height(150)
272
273      Text('.outline')
274        .backgroundColor(Color.Pink)
275        .fontSize(50)
276        .width(300)
277        .height(300)
278        .outline({
279          width: { left: 3, right: 6, top: 10, bottom: 15 },
280          color: { start: '#e3bbbb', end: Color.Blue, top: Color.Red, bottom: Color.Green },
281          radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
282          style: {
283            left: OutlineStyle.DOTTED,
284            right: OutlineStyle.DOTTED,
285            top: OutlineStyle.SOLID,
286            bottom: OutlineStyle.DASHED
287          }
288        }).textAlign(TextAlign.Center)
289    }
290  }
291}
292```
293
294The following shows how the example is represented with left-to-right scripts.
295
296![en-us_image_outling_ltr](figures/en-us_image_outling_ltr.png)
297
298The following shows how the example is represented with right-to-left scripts.
299
300![en-us_image_outling_rtl](figures/en-us_image_outling_rtl.png)
301