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