1# badge<a name="EN-US_TOPIC_0000001115814814"></a> 2 3- [Permission List](#en-us_topic_0000001060267851_section11257113618419) 4- [Child Component](#en-us_topic_0000001060267851_section9288143101012) 5- [Attribute](#en-us_topic_0000001060267851_section1355418214459) 6- [Style](#en-us_topic_0000001060267851_section5775351116) 7- [Event](#en-us_topic_0000001060267851_section43461940193518) 8- [Example Code](#en-us_topic_0000001060267851_section3510104413431) 9 10The **<badge\>** component is used to mark new events that require user attention in your application. 11 12> **NOTE:** 13>This component is supported since API version 5. 14 15## Permission List<a name="en-us_topic_0000001060267851_section11257113618419"></a> 16 17None 18 19## Child Component<a name="en-us_topic_0000001060267851_section9288143101012"></a> 20 21This component supports only one child component. 22 23> **NOTE:** 24>If multiple child components are used, only the first one takes effect by default. 25 26## Attribute<a name="en-us_topic_0000001060267851_section1355418214459"></a> 27 28<a name="en-us_topic_0000001060267851_table20633101642315"></a> 29<table><thead align="left"><tr id="en-us_topic_0000001060267851_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a>Name</p> 30</th> 31<th class="cellrowborder" valign="top" width="12.61%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a>Type</p> 32</th> 33<th class="cellrowborder" valign="top" width="14.21%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a>Default Value</p> 34</th> 35<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001060267851_p1142016584126"><a name="en-us_topic_0000001060267851_p1142016584126"></a><a name="en-us_topic_0000001060267851_p1142016584126"></a>Mandatory</p> 36</th> 37<th class="cellrowborder" valign="top" width="42.54%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a>Description</p> 38</th> 39</tr> 40</thead> 41<tbody><tr id="en-us_topic_0000001060267851_row20220192245413"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000000000611584_p2539mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000000000611584_p2539mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000000000611584_p2539mcpsimp"></a>placement</p> 42</td> 43<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000000000611584_p2541mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000000000611584_p2541mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000000000611584_p2541mcpsimp"></a>string</p> 44</td> 45<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_p38018334719"><a name="en-us_topic_0000001060267851_p38018334719"></a><a name="en-us_topic_0000001060267851_p38018334719"></a>rightTop</p> 46</td> 47<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p5420145891217"><a name="en-us_topic_0000001060267851_p5420145891217"></a><a name="en-us_topic_0000001060267851_p5420145891217"></a>No</p> 48</td> 49<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000000000611584_p2545mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000000000611584_p2545mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000000000611584_p2545mcpsimp"></a>Position of a number or dot badge. Available values are as follows:</p> 50<a name="en-us_topic_0000001060267851_ul127481544185920"></a><a name="en-us_topic_0000001060267851_ul127481544185920"></a><ul id="en-us_topic_0000001060267851_ul127481544185920"><li><strong id="en-us_topic_0000001060267851_b3391219132117"><a name="en-us_topic_0000001060267851_b3391219132117"></a><a name="en-us_topic_0000001060267851_b3391219132117"></a>right</strong>: on the right border of the component.</li><li><strong id="en-us_topic_0000001060267851_b341442812510"><a name="en-us_topic_0000001060267851_b341442812510"></a><a name="en-us_topic_0000001060267851_b341442812510"></a>rightTop</strong>: in the upper right corner of the component border.</li><li><strong id="en-us_topic_0000001060267851_b101851310251"><a name="en-us_topic_0000001060267851_b101851310251"></a><a name="en-us_topic_0000001060267851_b101851310251"></a>left</strong>: on the left border of the component.</li></ul> 51</td> 52</tr> 53<tr id="en-us_topic_0000001060267851_row1166016205117"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_p147912281417"><a name="en-us_topic_0000001060267851_p147912281417"></a><a name="en-us_topic_0000001060267851_p147912281417"></a>count</p> 54</td> 55<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_p1466020203110"><a name="en-us_topic_0000001060267851_p1466020203110"></a><a name="en-us_topic_0000001060267851_p1466020203110"></a>number</p> 56</td> 57<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_p1166012204118"><a name="en-us_topic_0000001060267851_p1166012204118"></a><a name="en-us_topic_0000001060267851_p1166012204118"></a>0</p> 58</td> 59<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p19420858141214"><a name="en-us_topic_0000001060267851_p19420858141214"></a><a name="en-us_topic_0000001060267851_p19420858141214"></a>No</p> 60</td> 61<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_p176601020718"><a name="en-us_topic_0000001060267851_p176601020718"></a><a name="en-us_topic_0000001060267851_p176601020718"></a>Number of notifications displayed via the badge. The default value is <strong id="en-us_topic_0000001060267851_b68878221295"><a name="en-us_topic_0000001060267851_b68878221295"></a><a name="en-us_topic_0000001060267851_b68878221295"></a>0</strong>. If the number of notifications is greater than 0, the badge changes from a dot to the number. If this attribute is not set or the value is less than or equal to 0, the badge is a dot.</p> 62<div class="note" id="en-us_topic_0000001060267851_note7205103063513"><a name="en-us_topic_0000001060267851_note7205103063513"></a><a name="en-us_topic_0000001060267851_note7205103063513"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060267851_p1205113093513"><a name="en-us_topic_0000001060267851_p1205113093513"></a><a name="en-us_topic_0000001060267851_p1205113093513"></a>When the <strong id="en-us_topic_0000001060267851_b107952317541"><a name="en-us_topic_0000001060267851_b107952317541"></a><a name="en-us_topic_0000001060267851_b107952317541"></a>count</strong> value is greater than the <strong id="en-us_topic_0000001060267851_b57744085419"><a name="en-us_topic_0000001060267851_b57744085419"></a><a name="en-us_topic_0000001060267851_b57744085419"></a>maxcount</strong> value, <em id="en-us_topic_0000001060267851_i136441735511"><a name="en-us_topic_0000001060267851_i136441735511"></a><a name="en-us_topic_0000001060267851_i136441735511"></a>maxcount</em><strong id="en-us_topic_0000001060267851_b135651010553"><a name="en-us_topic_0000001060267851_b135651010553"></a><a name="en-us_topic_0000001060267851_b135651010553"></a>+</strong> is displayed.</p> 63</div></div> 64</td> 65</tr> 66<tr id="en-us_topic_0000001060267851_row381531519129"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_p58156156128"><a name="en-us_topic_0000001060267851_p58156156128"></a><a name="en-us_topic_0000001060267851_p58156156128"></a>visible</p> 67</td> 68<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_p1815315171213"><a name="en-us_topic_0000001060267851_p1815315171213"></a><a name="en-us_topic_0000001060267851_p1815315171213"></a>boolean</p> 69</td> 70<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_p10815201531220"><a name="en-us_topic_0000001060267851_p10815201531220"></a><a name="en-us_topic_0000001060267851_p10815201531220"></a>false</p> 71</td> 72<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p2420758191218"><a name="en-us_topic_0000001060267851_p2420758191218"></a><a name="en-us_topic_0000001060267851_p2420758191218"></a>No</p> 73</td> 74<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_p158152158124"><a name="en-us_topic_0000001060267851_p158152158124"></a><a name="en-us_topic_0000001060267851_p158152158124"></a>Whether to display the badge. The value <strong id="en-us_topic_0000001060267851_b15203113585411"><a name="en-us_topic_0000001060267851_b15203113585411"></a><a name="en-us_topic_0000001060267851_b15203113585411"></a>true</strong> means that the badge shows up when a new notification is received. To use a number badge, set the <strong id="en-us_topic_0000001060267851_b102697204598"><a name="en-us_topic_0000001060267851_b102697204598"></a><a name="en-us_topic_0000001060267851_b102697204598"></a>count</strong> attribute.</p> 75</td> 76</tr> 77<tr id="en-us_topic_0000001060267851_row131835418463"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_p3506151764614"><a name="en-us_topic_0000001060267851_p3506151764614"></a><a name="en-us_topic_0000001060267851_p3506151764614"></a>maxcount</p> 78</td> 79<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_p25066171460"><a name="en-us_topic_0000001060267851_p25066171460"></a><a name="en-us_topic_0000001060267851_p25066171460"></a>number</p> 80</td> 81<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_p650621718461"><a name="en-us_topic_0000001060267851_p650621718461"></a><a name="en-us_topic_0000001060267851_p650621718461"></a>99</p> 82</td> 83<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p842055841217"><a name="en-us_topic_0000001060267851_p842055841217"></a><a name="en-us_topic_0000001060267851_p842055841217"></a>No</p> 84</td> 85<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_p85062017164611"><a name="en-us_topic_0000001060267851_p85062017164611"></a><a name="en-us_topic_0000001060267851_p85062017164611"></a>Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, <em id="en-us_topic_0000001060267851_i205207517"><a name="en-us_topic_0000001060267851_i205207517"></a><a name="en-us_topic_0000001060267851_i205207517"></a>maxcount</em><strong id="en-us_topic_0000001060267851_b12397175512"><a name="en-us_topic_0000001060267851_b12397175512"></a><a name="en-us_topic_0000001060267851_b12397175512"></a>+</strong> is displayed, for example, <strong id="en-us_topic_0000001060267851_b19503636557"><a name="en-us_topic_0000001060267851_b19503636557"></a><a name="en-us_topic_0000001060267851_b19503636557"></a>99+</strong>.</p> 86</td> 87</tr> 88<tr id="en-us_topic_0000001060267851_row63353519122"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_p1834335191211"><a name="en-us_topic_0000001060267851_p1834335191211"></a><a name="en-us_topic_0000001060267851_p1834335191211"></a>config</p> 89</td> 90<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_p123413519123"><a name="en-us_topic_0000001060267851_p123413519123"></a><a name="en-us_topic_0000001060267851_p123413519123"></a><a href="#en-us_topic_0000001060267851_table525042221515">BadgeConfig</a></p> 91</td> 92<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_p2341735201211"><a name="en-us_topic_0000001060267851_p2341735201211"></a><a name="en-us_topic_0000001060267851_p2341735201211"></a>-</p> 93</td> 94<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p1342055831219"><a name="en-us_topic_0000001060267851_p1342055831219"></a><a name="en-us_topic_0000001060267851_p1342055831219"></a>No</p> 95</td> 96<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_p834103581214"><a name="en-us_topic_0000001060267851_p834103581214"></a><a name="en-us_topic_0000001060267851_p834103581214"></a>Configuration of the badge.</p> 97</td> 98</tr> 99<tr id="en-us_topic_0000001060267851_row3584145820138"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"></a>id</p> 100</td> 101<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"></a>string</p> 102</td> 103<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"></a>-</p> 104</td> 105<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p1115935719139"><a name="en-us_topic_0000001060267851_p1115935719139"></a><a name="en-us_topic_0000001060267851_p1115935719139"></a>No</p> 106</td> 107<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"></a>Unique ID of a component.</p> 108</td> 109</tr> 110<tr id="en-us_topic_0000001060267851_row185841358111310"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"></a>style</p> 111</td> 112<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"></a>string</p> 113</td> 114<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"></a>-</p> 115</td> 116<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p16159175711135"><a name="en-us_topic_0000001060267851_p16159175711135"></a><a name="en-us_topic_0000001060267851_p16159175711135"></a>No</p> 117</td> 118<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"></a>Style declaration of a component.</p> 119</td> 120</tr> 121<tr id="en-us_topic_0000001060267851_row1758415821317"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"></a>class</p> 122</td> 123<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"></a>string</p> 124</td> 125<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"></a>-</p> 126</td> 127<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p14159135741312"><a name="en-us_topic_0000001060267851_p14159135741312"></a><a name="en-us_topic_0000001060267851_p14159135741312"></a>No</p> 128</td> 129<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"></a>Style class of a component, which is used to refer to a style table.</p> 130</td> 131</tr> 132<tr id="en-us_topic_0000001060267851_row155841058131318"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_p1786251117156"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_p1786251117156"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_p1786251117156"></a>ref</p> 133</td> 134<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_p1086241119157"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_p1086241119157"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_p1086241119157"></a>string</p> 135</td> 136<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_p586281111151"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_p586281111151"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_p586281111151"></a>-</p> 137</td> 138<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p1115912574132"><a name="en-us_topic_0000001060267851_p1115912574132"></a><a name="en-us_topic_0000001060267851_p1115912574132"></a>No</p> 139</td> 140<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_p113416153342"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_p113416153342"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_ph5815920163518"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_ph5815920163518"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_ph5815920163518"></a> or child components</span>. The reference information is registered with the parent component on <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_b08212202354"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_b08212202354"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_b08212202354"></a>$refs</strong>.</p> 141</td> 142</tr> 143<tr id="en-us_topic_0000001060267851_row16584135851317"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"></a>disabled</p> 144</td> 145<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"></a>boolean</p> 146</td> 147<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"></a>false</p> 148</td> 149<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p516018577132"><a name="en-us_topic_0000001060267851_p516018577132"></a><a name="en-us_topic_0000001060267851_p516018577132"></a>No</p> 150</td> 151<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"></a>Whether the component is disabled. If it is disabled, it cannot respond to user interaction.</p> 152</td> 153</tr> 154<tr id="en-us_topic_0000001060267851_row4583165810130"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"></a>data</p> 155</td> 156<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"></a>string</p> 157</td> 158<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"></a>-</p> 159</td> 160<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p8161135716138"><a name="en-us_topic_0000001060267851_p8161135716138"></a><a name="en-us_topic_0000001060267851_p8161135716138"></a>No</p> 161</td> 162<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"></a>Attribute set for components to facilitate data storage and reading.</p> 163</td> 164</tr> 165</tbody> 166</table> 167 168**Table 1** BadgeConfig 169 170<a name="en-us_topic_0000001060267851_table525042221515"></a> 171<table><thead align="left"><tr id="en-us_topic_0000001060267851_row10250162216151"><th class="cellrowborder" valign="top" width="15.370000000000001%" id="mcps1.2.6.1.1"><p id="en-us_topic_0000001060267851_p256733317156"><a name="en-us_topic_0000001060267851_p256733317156"></a><a name="en-us_topic_0000001060267851_p256733317156"></a>Name</p> 172</th> 173<th class="cellrowborder" valign="top" width="13.62%" id="mcps1.2.6.1.2"><p id="en-us_topic_0000001060267851_p13567143391514"><a name="en-us_topic_0000001060267851_p13567143391514"></a><a name="en-us_topic_0000001060267851_p13567143391514"></a>Type</p> 174</th> 175<th class="cellrowborder" valign="top" width="12.46%" id="mcps1.2.6.1.3"><p id="en-us_topic_0000001060267851_p165679339152"><a name="en-us_topic_0000001060267851_p165679339152"></a><a name="en-us_topic_0000001060267851_p165679339152"></a>Default Value</p> 176</th> 177<th class="cellrowborder" valign="top" width="7.22%" id="mcps1.2.6.1.4"><p id="en-us_topic_0000001060267851_p1018465012153"><a name="en-us_topic_0000001060267851_p1018465012153"></a><a name="en-us_topic_0000001060267851_p1018465012153"></a>Mandatory</p> 178</th> 179<th class="cellrowborder" valign="top" width="51.33%" id="mcps1.2.6.1.5"><p id="en-us_topic_0000001060267851_p1250142241516"><a name="en-us_topic_0000001060267851_p1250142241516"></a><a name="en-us_topic_0000001060267851_p1250142241516"></a>Description</p> 180</th> 181</tr> 182</thead> 183<tbody><tr id="en-us_topic_0000001060267851_row1425022251510"><td class="cellrowborder" valign="top" width="15.370000000000001%" headers="mcps1.2.6.1.1 "><p id="en-us_topic_0000001060267851_p6944185918156"><a name="en-us_topic_0000001060267851_p6944185918156"></a><a name="en-us_topic_0000001060267851_p6944185918156"></a>badgeColor</p> 184</td> 185<td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.2.6.1.2 "><p id="en-us_topic_0000001060267851_p3944185918156"><a name="en-us_topic_0000001060267851_p3944185918156"></a><a name="en-us_topic_0000001060267851_p3944185918156"></a><color></p> 186</td> 187<td class="cellrowborder" valign="top" width="12.46%" headers="mcps1.2.6.1.3 "><p id="en-us_topic_0000001060267851_p494412594152"><a name="en-us_topic_0000001060267851_p494412594152"></a><a name="en-us_topic_0000001060267851_p494412594152"></a>#fa2a2d</p> 188</td> 189<td class="cellrowborder" valign="top" width="7.22%" headers="mcps1.2.6.1.4 "><p id="en-us_topic_0000001060267851_p2018411507152"><a name="en-us_topic_0000001060267851_p2018411507152"></a><a name="en-us_topic_0000001060267851_p2018411507152"></a>No</p> 190</td> 191<td class="cellrowborder" valign="top" width="51.33%" headers="mcps1.2.6.1.5 "><p id="en-us_topic_0000001060267851_p12623249168"><a name="en-us_topic_0000001060267851_p12623249168"></a><a name="en-us_topic_0000001060267851_p12623249168"></a>Background color of the badge</p> 192</td> 193</tr> 194<tr id="en-us_topic_0000001060267851_row1325114221159"><td class="cellrowborder" valign="top" width="15.370000000000001%" headers="mcps1.2.6.1.1 "><p id="en-us_topic_0000001060267851_p189441459101515"><a name="en-us_topic_0000001060267851_p189441459101515"></a><a name="en-us_topic_0000001060267851_p189441459101515"></a>textColor</p> 195</td> 196<td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.2.6.1.2 "><p id="en-us_topic_0000001060267851_p18944175915154"><a name="en-us_topic_0000001060267851_p18944175915154"></a><a name="en-us_topic_0000001060267851_p18944175915154"></a><color></p> 197</td> 198<td class="cellrowborder" valign="top" width="12.46%" headers="mcps1.2.6.1.3 "><p id="en-us_topic_0000001060267851_p29441859141514"><a name="en-us_topic_0000001060267851_p29441859141514"></a><a name="en-us_topic_0000001060267851_p29441859141514"></a>#ffffff</p> 199</td> 200<td class="cellrowborder" valign="top" width="7.22%" headers="mcps1.2.6.1.4 "><p id="en-us_topic_0000001060267851_p31843506151"><a name="en-us_topic_0000001060267851_p31843506151"></a><a name="en-us_topic_0000001060267851_p31843506151"></a>No</p> 201</td> 202<td class="cellrowborder" valign="top" width="51.33%" headers="mcps1.2.6.1.5 "><p id="en-us_topic_0000001060267851_p196231461610"><a name="en-us_topic_0000001060267851_p196231461610"></a><a name="en-us_topic_0000001060267851_p196231461610"></a>Text color of the number badge</p> 203</td> 204</tr> 205<tr id="en-us_topic_0000001060267851_row132511522131513"><td class="cellrowborder" valign="top" width="15.370000000000001%" headers="mcps1.2.6.1.1 "><p id="en-us_topic_0000001060267851_p7945175918154"><a name="en-us_topic_0000001060267851_p7945175918154"></a><a name="en-us_topic_0000001060267851_p7945175918154"></a>textSize</p> 206</td> 207<td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.2.6.1.2 "><p id="en-us_topic_0000001060267851_p1594515919158"><a name="en-us_topic_0000001060267851_p1594515919158"></a><a name="en-us_topic_0000001060267851_p1594515919158"></a><length></p> 208</td> 209<td class="cellrowborder" valign="top" width="12.46%" headers="mcps1.2.6.1.3 "><p id="en-us_topic_0000001060267851_p189451259121511"><a name="en-us_topic_0000001060267851_p189451259121511"></a><a name="en-us_topic_0000001060267851_p189451259121511"></a>10px</p> 210</td> 211<td class="cellrowborder" valign="top" width="7.22%" headers="mcps1.2.6.1.4 "><p id="en-us_topic_0000001060267851_p14184125016151"><a name="en-us_topic_0000001060267851_p14184125016151"></a><a name="en-us_topic_0000001060267851_p14184125016151"></a>No</p> 212</td> 213<td class="cellrowborder" valign="top" width="51.33%" headers="mcps1.2.6.1.5 "><p id="en-us_topic_0000001060267851_p1962474101618"><a name="en-us_topic_0000001060267851_p1962474101618"></a><a name="en-us_topic_0000001060267851_p1962474101618"></a>Text size of the number badge</p> 214</td> 215</tr> 216<tr id="en-us_topic_0000001060267851_row225122212159"><td class="cellrowborder" valign="top" width="15.370000000000001%" headers="mcps1.2.6.1.1 "><p id="en-us_topic_0000001060267851_p1394585918156"><a name="en-us_topic_0000001060267851_p1394585918156"></a><a name="en-us_topic_0000001060267851_p1394585918156"></a>badgeSize</p> 217</td> 218<td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.2.6.1.2 "><p id="en-us_topic_0000001060267851_p159451459111519"><a name="en-us_topic_0000001060267851_p159451459111519"></a><a name="en-us_topic_0000001060267851_p159451459111519"></a><length></p> 219</td> 220<td class="cellrowborder" valign="top" width="12.46%" headers="mcps1.2.6.1.3 "><p id="en-us_topic_0000001060267851_p694545961517"><a name="en-us_topic_0000001060267851_p694545961517"></a><a name="en-us_topic_0000001060267851_p694545961517"></a>6px</p> 221</td> 222<td class="cellrowborder" valign="top" width="7.22%" headers="mcps1.2.6.1.4 "><p id="en-us_topic_0000001060267851_p10184135015153"><a name="en-us_topic_0000001060267851_p10184135015153"></a><a name="en-us_topic_0000001060267851_p10184135015153"></a>No</p> 223</td> 224<td class="cellrowborder" valign="top" width="51.33%" headers="mcps1.2.6.1.5 "><p id="en-us_topic_0000001060267851_p1962410411162"><a name="en-us_topic_0000001060267851_p1962410411162"></a><a name="en-us_topic_0000001060267851_p1962410411162"></a>Default size of the dot badge</p> 225</td> 226</tr> 227</tbody> 228</table> 229 230## Style<a name="en-us_topic_0000001060267851_section5775351116"></a> 231 232<a name="en-us_topic_0000001060267851_table1744514388541"></a> 233<table><thead align="left"><tr id="en-us_topic_0000001060267851_row1244614388545"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"></a>Name</p> 234</th> 235<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"></a>Type</p> 236</th> 237<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"></a>Default Value</p> 238</th> 239<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001060267851_p117421754619"><a name="en-us_topic_0000001060267851_p117421754619"></a><a name="en-us_topic_0000001060267851_p117421754619"></a>Mandatory</p> 240</th> 241<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"></a>Description</p> 242</th> 243</tr> 244</thead> 245<tbody><tr id="en-us_topic_0000001060267851_row13446238145410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1070mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1070mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1070mcpsimp"></a>width</p> 246</td> 247<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1072mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1072mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1072mcpsimp"></a><length><span id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph597168143913"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph597168143913"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph597168143913"></a> | <percentage></span></p> 248</td> 249<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p3948114217528"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p3948114217528"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p3948114217528"></a>-</p> 250</td> 251<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p95613521718"><a name="en-us_topic_0000001060267851_p95613521718"></a><a name="en-us_topic_0000001060267851_p95613521718"></a>No</p> 252</td> 253<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p624653010258"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p624653010258"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p624653010258"></a>Component width.</p> 254<p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p84811050134010"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p84811050134010"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p84811050134010"></a>If this attribute is not set, the width required for the element content is used. </p> 255</td> 256</tr> 257<tr id="en-us_topic_0000001060267851_row7446738195418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"></a>height</p> 258</td> 259<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"></a><length><span id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph11748352163918"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph11748352163918"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph11748352163918"></a> | <percentage></span></p> 260</td> 261<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"></a>-</p> 262</td> 263<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p15621357175"><a name="en-us_topic_0000001060267851_p15621357175"></a><a name="en-us_topic_0000001060267851_p15621357175"></a>No</p> 264</td> 265<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1477601264"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1477601264"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1477601264"></a>Component height.</p> 266<p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p208761554184020"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p208761554184020"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p208761554184020"></a>If this length attribute is not set, the length required for the element content is used. </p> 267</td> 268</tr> 269<tr id="en-us_topic_0000001060267851_row18446638145412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"></a>padding</p> 270</td> 271<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"></a><length></p> 272</td> 273<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"></a>0</p> 274</td> 275<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p19729127112814"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p19729127112814"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p19729127112814"></a>No</p> 276</td> 277<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><div class="p" id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"></a>The attribute can have one to four values:<a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul15202134923211"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul15202134923211"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul15202134923211"><li><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p10614155353215"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p10614155353215"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p10614155353215"></a>If you set only one value, it specifies the padding for four sides.</p> 278</li><li><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p10614175393216"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p10614175393216"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p10614175393216"></a>If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.</p> 279</li><li><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p8614205393214"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p8614205393214"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p8614205393214"></a>If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.</p> 280</li><li><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p106141853193215"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p106141853193215"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p106141853193215"></a>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).</p> 281</li></ul> 282</div> 283</td> 284</tr> 285<tr id="en-us_topic_0000001060267851_row24464380544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"></a>padding-[left|top|right|bottom]</p> 286</td> 287<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"></a><length></p> 288</td> 289<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"></a>0</p> 290</td> 291<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p11729374289"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p11729374289"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p11729374289"></a>No</p> 292</td> 293<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"></a>Left, top, right, and bottom padding (in px).</p> 294</td> 295</tr> 296<tr id="en-us_topic_0000001060267851_row1144723845412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p769124717365"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p769124717365"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p769124717365"></a>padding-[start|end]</p> 297</td> 298<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p157617124374"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p157617124374"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p157617124374"></a><length></p> 299</td> 300<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1069144703616"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1069144703616"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1069144703616"></a>0</p> 301</td> 302<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1373027182819"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1373027182819"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1373027182819"></a>No</p> 303</td> 304<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1269184753610"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1269184753610"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1269184753610"></a>Start and end padding.</p> 305</td> 306</tr> 307<tr id="en-us_topic_0000001060267851_row11447438175410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"></a>margin</p> 308</td> 309<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"></a><length></p> 310</td> 311<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"></a>0</p> 312</td> 313<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p4730774285"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p4730774285"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p4730774285"></a>No</p> 314</td> 315<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1112mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1112mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1112mcpsimp"></a>Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:</p> 316<a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul5333133311105"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul5333133311105"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul5333133311105"><li><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p03345339103"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p03345339103"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p03345339103"></a>If you set only one value, it specifies the margin for all the four sides.</p> 317</li><li><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1133420334108"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1133420334108"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1133420334108"></a>If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.</p> 318</li><li><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p193341533191015"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p193341533191015"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p193341533191015"></a>If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.</p> 319</li><li><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p733412334102"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p733412334102"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p733412334102"></a>If you set four values, they are margins for top, right, bottom, and left sides, respectively.</p> 320</li></ul> 321</td> 322</tr> 323<tr id="en-us_topic_0000001060267851_row144473383544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"></a>margin-[left|top|right|bottom]</p> 324</td> 325<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"></a><length></p> 326</td> 327<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"></a>0</p> 328</td> 329<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p773013742811"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p773013742811"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p773013742811"></a>No</p> 330</td> 331<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"></a>Left, top, right, and bottom margins.</p> 332</td> 333</tr> 334<tr id="en-us_topic_0000001060267851_row944743811541"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p9492107123816"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p9492107123816"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p9492107123816"></a>margin-[start|end]</p> 335</td> 336<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p157617124374_1"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p157617124374_1"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p157617124374_1"></a><length></p> 337</td> 338<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1549213793811"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1549213793811"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1549213793811"></a>0</p> 339</td> 340<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p5564195161720"><a name="en-us_topic_0000001060267851_p5564195161720"></a><a name="en-us_topic_0000001060267851_p5564195161720"></a>No</p> 341</td> 342<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1049212715388"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1049212715388"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1049212715388"></a>Start and end margins.</p> 343</td> 344</tr> 345<tr id="en-us_topic_0000001060267851_row16447238155411"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"></a>border</p> 346</td> 347<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"></a>-</p> 348</td> 349<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"></a>0</p> 350</td> 351<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p12564953175"><a name="en-us_topic_0000001060267851_p12564953175"></a><a name="en-us_topic_0000001060267851_p12564953175"></a>No</p> 352</td> 353<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"></a>Shorthand attribute to set all borders. You can set <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b79128342503"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b79128342503"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b79128342503"></a>border-width</strong>, <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b9366173919505"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b9366173919505"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b9366173919505"></a>border-style</strong>, and <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b184351248205019"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b184351248205019"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b184351248205019"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 354</td> 355</tr> 356<tr id="en-us_topic_0000001060267851_row4447138115414"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"></a>border-style</p> 357</td> 358<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p513631613319"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p513631613319"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p513631613319"></a>string</p> 359</td> 360<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"></a>solid</p> 361</td> 362<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p155655513173"><a name="en-us_topic_0000001060267851_p155655513173"></a><a name="en-us_topic_0000001060267851_p155655513173"></a>No</p> 363</td> 364<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p342285712314"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p342285712314"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p342285712314"></a>Shorthand attribute to set the style for all borders. Available values are as follows:</p> 365<a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul1470834505612"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul1470834505612"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul1470834505612"><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b143453286360"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b143453286360"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b143453286360"></a>dotted</strong>: Dotted border. The radius of a dot is half of border-width.</li><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b792117280367"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b792117280367"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b792117280367"></a>dashed</strong>: Dashed border</li></ul> 366<a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul15621125545612"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul15621125545612"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul15621125545612"><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1335862963610"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1335862963610"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1335862963610"></a>solid</strong>: Solid border</li></ul> 367</td> 368</tr> 369<tr id="en-us_topic_0000001060267851_row1656512239262"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p119531437370"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p119531437370"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p119531437370"></a>border-[left|top|right|bottom]-style</p> 370</td> 371<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p129532037175"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p129532037175"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p129532037175"></a>string</p> 372</td> 373<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p495312372717"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p495312372717"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p495312372717"></a>solid</p> 374</td> 375<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p169534375717"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p169534375717"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p169534375717"></a>No</p> 376</td> 377<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p595353718719"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p595353718719"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p595353718719"></a>Styles of the left, top, right, and bottom borders. The available values are <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b17769171311540"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b17769171311540"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b17769171311540"></a>dotted</strong>, <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b237141519547"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b237141519547"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b237141519547"></a>dashed</strong>, and <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b8949161613540"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b8949161613540"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b8949161613540"></a>solid</strong>.</p> 378</td> 379</tr> 380<tr id="en-us_topic_0000001060267851_row19448113811542"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"></a>border-[left|top|right|bottom]</p> 381</td> 382<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"></a>-</p> 383</td> 384<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"></a>-</p> 385</td> 386<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p67303762810"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p67303762810"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p67303762810"></a>No</p> 387</td> 388<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1148mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1148mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1148mcpsimp"></a>Shorthand attribute to set the borders for every side respectively. You can set <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b122415514554"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b122415514554"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b122415514554"></a>border-width</strong>, <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b12296178135513"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b12296178135513"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b12296178135513"></a>border-style</strong>, and <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1129701210553"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1129701210553"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1129701210553"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 389</td> 390</tr> 391<tr id="en-us_topic_0000001060267851_row124481638165417"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"></a>border-width</p> 392</td> 393<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"></a><length></p> 394</td> 395<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"></a>0</p> 396</td> 397<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p205664516174"><a name="en-us_topic_0000001060267851_p205664516174"></a><a name="en-us_topic_0000001060267851_p205664516174"></a>No</p> 398</td> 399<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"></a>Shorthand attribute to set the width of all borders<span id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph07997369365"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph07997369365"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph07997369365"></a>, or separately set the width of each border</span>.</p> 400</td> 401</tr> 402<tr id="en-us_topic_0000001060267851_row54481038165410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"></a>border-[left|top|right|bottom]-width</p> 403</td> 404<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"></a><length></p> 405</td> 406<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"></a>0</p> 407</td> 408<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p65661252178"><a name="en-us_topic_0000001060267851_p65661252178"></a><a name="en-us_topic_0000001060267851_p65661252178"></a>No</p> 409</td> 410<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"></a>Attribute to set widths of left, top, right, and bottom borders.</p> 411</td> 412</tr> 413<tr id="en-us_topic_0000001060267851_row1744817385547"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"></a>border-color</p> 414</td> 415<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"></a><color></p> 416</td> 417<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"></a>black</p> 418</td> 419<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p1456713551711"><a name="en-us_topic_0000001060267851_p1456713551711"></a><a name="en-us_topic_0000001060267851_p1456713551711"></a>No</p> 420</td> 421<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"></a>Shorthand attribute to set the color of all borders<span id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph9587639113619"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph9587639113619"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph9587639113619"></a>, or separately set the color of each border</span>.</p> 422</td> 423</tr> 424<tr id="en-us_topic_0000001060267851_row844813835410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"></a>border-[left|top|right|bottom]-color</p> 425</td> 426<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"></a><color></p> 427</td> 428<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"></a>black</p> 429</td> 430<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p125678561712"><a name="en-us_topic_0000001060267851_p125678561712"></a><a name="en-us_topic_0000001060267851_p125678561712"></a>No</p> 431</td> 432<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"></a>Attribute to set colors of left, top, right, and bottom borders.</p> 433</td> 434</tr> 435<tr id="en-us_topic_0000001060267851_row944813389540"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"></a>border-radius</p> 436</td> 437<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"></a><length></p> 438</td> 439<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"></a>-</p> 440</td> 441<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p67306752816"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p67306752816"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p67306752816"></a>No</p> 442</td> 443<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p18998933174117"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p18998933174117"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p18998933174117"></a>Attribute to set the radius of round borders of an element. <span id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph1249443123611"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph1249443123611"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph1249443123611"></a>This attribute cannot be used to set the width or color of a specific border. To set the width or color, you need to set <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b124211434362"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b124211434362"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b124211434362"></a>border-width</strong> or <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b124894383615"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b124894383615"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b124894383615"></a>border-color</strong> for all the borders at the same time.</span></p> 444</td> 445</tr> 446<tr id="en-us_topic_0000001060267851_row104494382546"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"></a>border-[top|bottom]-[left|right]-radius</p> 447</td> 448<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"></a><length></p> 449</td> 450<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"></a>-</p> 451</td> 452<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p27305718283"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p27305718283"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p27305718283"></a>No</p> 453</td> 454<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1204mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1204mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1204mcpsimp"></a>Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners</p> 455</td> 456</tr> 457<tr id="en-us_topic_0000001060267851_row1344912384548"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"></a>background</p> 458</td> 459<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"></a><linear-gradient></p> 460</td> 461<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"></a>-</p> 462</td> 463<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p15730197132811"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p15730197132811"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p15730197132811"></a>No</p> 464</td> 465<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"><a name="en-us_topic_0000001060267851_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></a>This attribute supports <a href="gradient-styles.md#EN-US_TOPIC_0000001115974726">Gradient Styles</a> only but is not compatible with <strong id="en-us_topic_0000001060267851_en-us_topic_0000001059340528_b389373419292"><a name="en-us_topic_0000001060267851_en-us_topic_0000001059340528_b389373419292"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001059340528_b389373419292"></a>background-color</strong> or <strong id="en-us_topic_0000001060267851_en-us_topic_0000001059340528_b0399637142918"><a name="en-us_topic_0000001060267851_en-us_topic_0000001059340528_b0399637142918"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001059340528_b0399637142918"></a>background-image</strong>.</p> 466</td> 467</tr> 468<tr id="en-us_topic_0000001060267851_row15449838185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"></a>background-color</p> 469</td> 470<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"></a><color></p> 471</td> 472<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"></a>-</p> 473</td> 474<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p17730577282"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p17730577282"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p17730577282"></a>No</p> 475</td> 476<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"></a>Background color.</p> 477</td> 478</tr> 479<tr id="en-us_topic_0000001060267851_row54491338115412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"></a>background-image</p> 480</td> 481<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"></a>string</p> 482</td> 483<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"></a>-</p> 484</td> 485<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p7730976285"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p7730976285"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p7730976285"></a>No</p> 486</td> 487<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"></a>Background image. Currently, this attribute is not compatible with <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b17699154763620"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b17699154763620"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b17699154763620"></a>background-color</strong> or <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b87001647163613"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b87001647163613"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b87001647163613"></a>background</strong>. Both Internet and local image resources are supported.</p> 488</td> 489</tr> 490<tr id="en-us_topic_0000001060267851_row6449238185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"></a>background-size</p> 491</td> 492<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul1065173641310"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul1065173641310"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul1065173641310"><li>string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 493</td> 494<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"></a>auto</p> 495</td> 496<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p137309714282"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p137309714282"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p137309714282"></a>No</p> 497</td> 498<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p91971112114318"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p91971112114318"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p91971112114318"></a>Background image size.</p> 499<a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul41331853154111"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul41331853154111"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul41331853154111"><li>The <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1229715499365"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1229715499365"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1229715499365"></a>string</strong> values are as follows:<a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul13611494111"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul13611494111"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul13611494111"><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b4759749163610"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b4759749163610"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b4759749163610"></a>contain</strong>: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.</li><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b136485011365"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b136485011365"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b136485011365"></a>cover</strong>: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background localization area.</li><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1425512535366"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1425512535366"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1425512535366"></a>auto</strong>: The original image width-height ratio is retained.</li></ul> 500</li><li>The two <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b13309145193614"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b13309145193614"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b13309145193614"></a><length></strong> values are as follows:<p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1840244924418"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1840244924418"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1840244924418"></a>Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b146661156143617"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b146661156143617"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b146661156143617"></a>auto</strong> by default.</p> 501</li><li>The two <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1667415763613"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1667415763613"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1667415763613"></a><percentage></strong> values are as follows:<p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p17936154410457"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p17936154410457"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p17936154410457"></a>Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b17190164371"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b17190164371"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b17190164371"></a>auto</strong> by default.</p> 502</li></ul> 503</td> 504</tr> 505<tr id="en-us_topic_0000001060267851_row94491238155415"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"></a>background-repeat</p> 506</td> 507<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"></a>string</p> 508</td> 509<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"></a>repeat</p> 510</td> 511<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1673015702810"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1673015702810"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1673015702810"></a>No</p> 512</td> 513<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"></a>Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.</p> 514<a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul8236153103612"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul8236153103612"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul8236153103612"><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1363463710"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1363463710"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1363463710"></a>repeat</strong>: Draws images along the x-axis and y-axis at the same time.</li><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b267416916377"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b267416916377"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b267416916377"></a>repeat-x</strong>: Draws images along the x-axis.</li><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b625561011379"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b625561011379"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b625561011379"></a>repeat-y</strong>: Draws images along the y-axis.</li><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1122181133715"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1122181133715"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1122181133715"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul> 515</td> 516</tr> 517<tr id="en-us_topic_0000001060267851_row94491738105419"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"></a>background-position</p> 518</td> 519<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul8874155216502"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul8874155216502"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul8874155216502"><li>string string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 520</td> 521<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"></a>0px 0px</p> 522</td> 523<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p173010720280"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p173010720280"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p173010720280"></a>No</p> 524</td> 525<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul1590812103363"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul1590812103363"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul1590812103363"><li>Using keywords: If only one keyword is specified, the other value is <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b997011116376"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b997011116376"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b997011116376"></a>center</strong> by default. The two values define the horizontal position and vertical position, respectively.<a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul1453531734716"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul1453531734716"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul1453531734716"><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b0982111273712"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b0982111273712"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b0982111273712"></a>left</strong>: leftmost in the horizontal direction</li><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b866713583912"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b866713583912"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b866713583912"></a>right</strong>: rightmost in the horizontal direction</li><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b5886013193716"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b5886013193716"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b5886013193716"></a>top</strong>: top in the vertical direction</li><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b84197142376"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b84197142376"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b84197142376"></a>bottom</strong>: bottom in the vertical direction</li><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b14894114103710"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b14894114103710"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b14894114103710"></a>center</strong>: center position</li></ul> 526</li></ul> 527<a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul10908121023615"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul10908121023615"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul10908121023615"><li>Using <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b11401615193715"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b11401615193715"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b11401615193715"></a><length></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1341381819379"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1341381819379"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1341381819379"></a>0 0</strong> indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b48671516183714"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b48671516183714"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b48671516183714"></a>50%</strong>.</li><li>Using <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b5492717163712"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b5492717163712"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b5492717163712"></a><percentage></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b164741723183712"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b164741723183712"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b164741723183712"></a>0% 0%</strong> indicates the upper left corner. <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b64022245377"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b64022245377"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b64022245377"></a>100% 100%</strong> indicates the lower right corner. If only one value is specified, the other one is <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b7893424163718"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b7893424163718"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b7893424163718"></a>50%</strong>.</li><li>Using both <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b154811725193718"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b154811725193718"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b154811725193718"></a><percentage></strong> and <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b34834254377"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b34834254377"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b34834254377"></a><length></strong>.</li></ul> 528</td> 529</tr> 530<tr id="en-us_topic_0000001060267851_row20450143885416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p134581712103910"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p134581712103910"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p134581712103910"></a>opacity</p> 531</td> 532<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"></a>number</p> 533</td> 534<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"></a>1</p> 535</td> 536<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1873011722814"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1873011722814"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1873011722814"></a>No</p> 537</td> 538<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p122515161139"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p122515161139"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p122515161139"></a>Transparency of an element. The value ranges from <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1871715526385"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1871715526385"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1871715526385"></a>0</strong> to <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b177181452103815"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b177181452103815"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b177181452103815"></a>1</strong>. The value <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b13718155210380"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b13718155210380"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b13718155210380"></a>1</strong> means opaque, and <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b6718152103818"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b6718152103818"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b6718152103818"></a>0</strong> means completely transparent.</p> 539</td> 540</tr> 541<tr id="en-us_topic_0000001060267851_row1450123865418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"></a>display</p> 542</td> 543<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1544115441446"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1544115441446"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1544115441446"></a>string</p> 544<p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"></a></p> 545</td> 546<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"></a>flex</p> 547</td> 548<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p167303762818"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p167303762818"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p167303762818"></a>No</p> 549</td> 550<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p23704018414"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p23704018414"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p23704018414"></a>How and whether to display the box containing an element. Available values are as follows:</p> 551<a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul12227103394916"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul12227103394916"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul12227103394916"><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b57468289377"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b57468289377"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b57468289377"></a>flex</strong>: flexible layout</li><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b18887133293920"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b18887133293920"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b18887133293920"></a>none</strong>: The element is hidden.</li></ul> 552</td> 553</tr> 554<tr id="en-us_topic_0000001060267851_row194503380541"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"></a>visibility</p> 555</td> 556<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p15475737486"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p15475737486"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p15475737486"></a>string</p> 557<p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"></a></p> 558</td> 559<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"></a>visible</p> 560</td> 561<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p57301471281"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p57301471281"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p57301471281"></a>No</p> 562</td> 563<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1568839154517"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1568839154517"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1568839154517"></a>Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b15844103015378"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b15844103015378"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b15844103015378"></a>display</strong> attribute to <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b4845153013712"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b4845153013712"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b4845153013712"></a>none</strong>.) Available values are as follows:</p> 564<a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul751984164920"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul751984164920"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul751984164920"><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b17429331133711"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b17429331133711"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b17429331133711"></a>visible</strong>: The element is visible.</li><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b109191231193710"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b109191231193710"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b109191231193710"></a>hidden</strong>: The element is hidden but still takes up space.</li></ul> 565<div class="note" id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note4549524649"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note4549524649"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note4549524649"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p25499241642"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p25499241642"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p25499241642"></a>If both <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b719810016405"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b719810016405"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b719810016405"></a>visibility</strong> and <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b187052264018"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b187052264018"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b187052264018"></a>display</strong> are set, only <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b107788924011"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b107788924011"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b107788924011"></a>display</strong> takes effect.</p> 566</div></div> 567</td> 568</tr> 569<tr id="en-us_topic_0000001060267851_row13450113811544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1292mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1292mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1292mcpsimp"></a>flex</p> 570</td> 571<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1294mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1294mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1294mcpsimp"></a>number</p> 572</td> 573<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1296mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1296mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1296mcpsimp"></a>-</p> 574</td> 575<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1373057132812"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1373057132812"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1373057132812"></a>No</p> 576</td> 577<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1298mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1298mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1298mcpsimp"></a>How to divide available space of the parent component for a child component. It is used as a shorthand attribute to set the <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b675073313371"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b675073313371"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b675073313371"></a>flex-grow</strong> attribute of the parent component.</p> 578<div class="note" id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note34891253201520"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note34891253201520"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note34891253201520"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1248915538152"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1248915538152"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1248915538152"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b5392113473716"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b5392113473716"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b5392113473716"></a><div></strong>, <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b18394103473713"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b18394103473713"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b18394103473713"></a><list-item></strong>, or <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b153951534103716"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b153951534103716"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b153951534103716"></a><tabs></strong>.</p> 579</div></div> 580</td> 581</tr> 582<tr id="en-us_topic_0000001060267851_row13450138205418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1301mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1301mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1301mcpsimp"></a>flex-grow</p> 583</td> 584<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1303mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1303mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1303mcpsimp"></a>number</p> 585</td> 586<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1305mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1305mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1305mcpsimp"></a>0</p> 587</td> 588<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p15572757176"><a name="en-us_topic_0000001060267851_p15572757176"></a><a name="en-us_topic_0000001060267851_p15572757176"></a>No</p> 589</td> 590<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p4437122419557"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p4437122419557"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p4437122419557"></a>How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1682343583716"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1682343583716"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1682343583716"></a>0</strong> indicates that the child component does not grow.</p> 591<div class="note" id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note201231734212"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note201231734212"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note201231734212"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p184555314553"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p184555314553"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p184555314553"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1444983613711"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1444983613711"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1444983613711"></a><div></strong>, <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b64501936153711"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b64501936153711"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b64501936153711"></a><list-item></strong>, or <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1145115367371"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1145115367371"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1145115367371"></a><tabs></strong>.</p> 592</div></div> 593</td> 594</tr> 595<tr id="en-us_topic_0000001060267851_row845016384549"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1310mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1310mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1310mcpsimp"></a>flex-shrink</p> 596</td> 597<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1312mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1312mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1312mcpsimp"></a>number</p> 598</td> 599<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1314mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1314mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1314mcpsimp"></a>1</p> 600</td> 601<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p125721659174"><a name="en-us_topic_0000001060267851_p125721659174"></a><a name="en-us_topic_0000001060267851_p125721659174"></a>No</p> 602</td> 603<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1316mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1316mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1316mcpsimp"></a>How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b783242395"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b783242395"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b783242395"></a>0</strong> indicates that the child component does not shrink.</p> 604<div class="note" id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note147160917217"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note147160917217"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note147160917217"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p844914328577"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p844914328577"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p844914328577"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1441723203915"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1441723203915"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1441723203915"></a><div></strong>, <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b14282393913"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b14282393913"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b14282393913"></a><list-item></strong>, or <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b2043102343910"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b2043102343910"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b2043102343910"></a><tabs></strong>.</p> 605</div></div> 606</td> 607</tr> 608<tr id="en-us_topic_0000001060267851_row144511738195411"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1319mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1319mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1319mcpsimp"></a>flex-basis</p> 609</td> 610<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1148910787"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1148910787"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1148910787"></a><length></p> 611<p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1321mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1321mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1321mcpsimp"></a></p> 612</td> 613<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1323mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1323mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1323mcpsimp"></a>-</p> 614</td> 615<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_p12573452172"><a name="en-us_topic_0000001060267851_p12573452172"></a><a name="en-us_topic_0000001060267851_p12573452172"></a>No</p> 616</td> 617<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1325mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1325mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1325mcpsimp"></a>Initial length of the flex item on the main axis.</p> 618<div class="note" id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note62848141222"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note62848141222"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note62848141222"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p16711745115718"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p16711745115718"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p16711745115718"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1864241917398"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1864241917398"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1864241917398"></a><div></strong>, <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b19648111913920"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b19648111913920"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b19648111913920"></a><list-item></strong>, or <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b46497191399"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b46497191399"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b46497191399"></a><tabs></strong>.</p> 619</div></div> 620</td> 621</tr> 622<tr id="en-us_topic_0000001060267851_row184519384544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1328mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1328mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1328mcpsimp"></a>position</p> 623</td> 624<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1330mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1330mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1330mcpsimp"></a>string</p> 625</td> 626<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1332mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1332mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1332mcpsimp"></a>relative</p> 627</td> 628<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1173107172814"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1173107172814"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1173107172814"></a>No</p> 629</td> 630<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1334mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1334mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1334mcpsimp"></a>Positioning type of an element. Dynamic changes are not supported.</p> 631<a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul17185232185014"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul17185232185014"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul17185232185014"><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1894911155394"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1894911155394"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1894911155394"></a>fixed</strong>: The element is positioned related to the browser window.</li><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b823115152390"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b823115152390"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b823115152390"></a>absolute</strong>: The element is positioned absolutely to its parent element.</li><li><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b736151417395"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b736151417395"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b736151417395"></a>relative</strong>: The element is positioned relative to its normal position.</li></ul> 632<div class="note" id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note167617191219"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note167617191219"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_note167617191219"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1839092815101"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1839092815101"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1839092815101"></a>The <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b13941713133910"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b13941713133910"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b13941713133910"></a>absolute</strong> attribute takes effect only when the parent component is <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1099913173916"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1099913173916"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b1099913173916"></a><div></strong> or <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b181001413123919"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b181001413123919"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b181001413123919"></a><stack></strong>.</p> 633</div></div> 634</td> 635</tr> 636<tr id="en-us_topic_0000001060267851_row1545123811547"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1337mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1337mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1337mcpsimp"></a>[left|top<span id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph14927143614712"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph14927143614712"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph14927143614712"></a>|right|bottom</span>]</p> 637</td> 638<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1849062221214"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1849062221214"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p1849062221214"></a><length></p> 639</td> 640<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1341mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1341mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1341mcpsimp"></a>-</p> 641</td> 642<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p187314719288"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p187314719288"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_p187314719288"></a>No</p> 643</td> 644<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1343mcpsimp"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1343mcpsimp"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1343mcpsimp"></a><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b481348173914"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b481348173914"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b481348173914"></a>left|top</strong><span id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph4818118173914"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph4818118173914"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ph4818118173914"></a><strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b68143833912"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b68143833912"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b68143833912"></a>|right|bottom</strong></span> must be used together with <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b881916818394"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b881916818394"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b881916818394"></a>position</strong> to determine the offset position of an element.</p> 645<a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul12671003525"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul12671003525"></a><ul id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_ul12671003525"><li>The <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b885117712398"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b885117712398"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b885117712398"></a>left</strong> attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.</li><li>The <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b65591759395"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b65591759395"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b65591759395"></a>top</strong> attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.</li><li>The <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b179013323910"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b179013323910"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b179013323910"></a>right</strong> attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element. </li><li>The <strong id="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b77091602397"><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b77091602397"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001050791158_b77091602397"></a>bottom</strong> attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element. </li></ul> 646</td> 647</tr> 648</tbody> 649</table> 650 651> **NOTE:** 652>The total size of child components must be smaller than or equal to that of the **<badge\>** component. Otherwise, the child components cannot be displayed. 653 654## Event<a name="en-us_topic_0000001060267851_section43461940193518"></a> 655 656<a name="en-us_topic_0000001060267851_tf7a840896dc848b5ab17a18b50036601"></a> 657<table><thead align="left"><tr id="en-us_topic_0000001060267851_rf3d0da15d2f64cd492dfa1e7d98890a5"><th class="cellrowborder" valign="top" width="15.02%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001060267851_a487aa1c493e84ca68567b4b65051674d"><a name="en-us_topic_0000001060267851_a487aa1c493e84ca68567b4b65051674d"></a><a name="en-us_topic_0000001060267851_a487aa1c493e84ca68567b4b65051674d"></a>Name</p> 658</th> 659<th class="cellrowborder" valign="top" width="23.05%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001060267851_adc4b506cda3043508da6ee7649c12ca4"><a name="en-us_topic_0000001060267851_adc4b506cda3043508da6ee7649c12ca4"></a><a name="en-us_topic_0000001060267851_adc4b506cda3043508da6ee7649c12ca4"></a>Parameter</p> 660</th> 661<th class="cellrowborder" valign="top" width="61.92999999999999%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001060267851_a59e4cbe58a5c42a7a4585bc8365783bc"><a name="en-us_topic_0000001060267851_a59e4cbe58a5c42a7a4585bc8365783bc"></a><a name="en-us_topic_0000001060267851_a59e4cbe58a5c42a7a4585bc8365783bc"></a>Description</p> 662</th> 663</tr> 664</thead> 665<tbody><tr id="en-us_topic_0000001060267851_r7683acd1d0964f31840d03c9aeb32fca"><td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060267851_a58fb4b1d870f466e955cf5ea879c4d4a"><a name="en-us_topic_0000001060267851_a58fb4b1d870f466e955cf5ea879c4d4a"></a><a name="en-us_topic_0000001060267851_a58fb4b1d870f466e955cf5ea879c4d4a"></a>touchstart</p> 666</td> 667<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"><a name="en-us_topic_0000001060267851_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 668</td> 669<td class="cellrowborder" valign="top" width="61.92999999999999%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060267851_afa4290e2620f4f5fbdcb74dcae84e536"><a name="en-us_topic_0000001060267851_afa4290e2620f4f5fbdcb74dcae84e536"></a><a name="en-us_topic_0000001060267851_afa4290e2620f4f5fbdcb74dcae84e536"></a>Triggered when the tapping starts.</p> 670</td> 671</tr> 672<tr id="en-us_topic_0000001060267851_r7f70ef6c895e4d2d95325887fee7d62e"><td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060267851_a23e0317cfee94650be4dcd2280c3e94e"><a name="en-us_topic_0000001060267851_a23e0317cfee94650be4dcd2280c3e94e"></a><a name="en-us_topic_0000001060267851_a23e0317cfee94650be4dcd2280c3e94e"></a>touchmove</p> 673</td> 674<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"><a name="en-us_topic_0000001060267851_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 675</td> 676<td class="cellrowborder" valign="top" width="61.92999999999999%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060267851_a37f7cc43d82c4ee18512bd079349079d"><a name="en-us_topic_0000001060267851_a37f7cc43d82c4ee18512bd079349079d"></a><a name="en-us_topic_0000001060267851_a37f7cc43d82c4ee18512bd079349079d"></a>Triggered when the tapping moves.</p> 677</td> 678</tr> 679<tr id="en-us_topic_0000001060267851_ra5c278d41f9045ed9d95e13165974bf4"><td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060267851_ad0728eeac06143bbb4a6fdf1ed5c6d91"><a name="en-us_topic_0000001060267851_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a><a name="en-us_topic_0000001060267851_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a>touchcancel</p> 680</td> 681<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"><a name="en-us_topic_0000001060267851_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 682</td> 683<td class="cellrowborder" valign="top" width="61.92999999999999%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060267851_a739d9ef0db624f6284554aeaeddffa0a"><a name="en-us_topic_0000001060267851_a739d9ef0db624f6284554aeaeddffa0a"></a><a name="en-us_topic_0000001060267851_a739d9ef0db624f6284554aeaeddffa0a"></a>Triggered when the tapping is interrupted.</p> 684</td> 685</tr> 686<tr id="en-us_topic_0000001060267851_rddfe06969173404d96b60c402a7e783c"><td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060267851_a233e2f6ff39f49fd97b8f233875d01d4"><a name="en-us_topic_0000001060267851_a233e2f6ff39f49fd97b8f233875d01d4"></a><a name="en-us_topic_0000001060267851_a233e2f6ff39f49fd97b8f233875d01d4"></a>touchend</p> 687</td> 688<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"><a name="en-us_topic_0000001060267851_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 689</td> 690<td class="cellrowborder" valign="top" width="61.92999999999999%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060267851_a05c0fe4e05ef4154acee8a06ad56a2de"><a name="en-us_topic_0000001060267851_a05c0fe4e05ef4154acee8a06ad56a2de"></a><a name="en-us_topic_0000001060267851_a05c0fe4e05ef4154acee8a06ad56a2de"></a>Triggered when the tapping ends.</p> 691</td> 692</tr> 693<tr id="en-us_topic_0000001060267851_rec1121b8bebc4a3f9ed9a906d061746e"><td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060267851_a2fb4de45b1594f6fa1a7da45ce0db57f"><a name="en-us_topic_0000001060267851_a2fb4de45b1594f6fa1a7da45ce0db57f"></a><a name="en-us_topic_0000001060267851_a2fb4de45b1594f6fa1a7da45ce0db57f"></a>click</p> 694</td> 695<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"><a name="en-us_topic_0000001060267851_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a>-</p> 696</td> 697<td class="cellrowborder" valign="top" width="61.92999999999999%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060267851_a1d32f00c38c440ddaa63c3f3e01d4e09"><a name="en-us_topic_0000001060267851_a1d32f00c38c440ddaa63c3f3e01d4e09"></a><a name="en-us_topic_0000001060267851_a1d32f00c38c440ddaa63c3f3e01d4e09"></a>Triggered when the component is clicked.</p> 698</td> 699</tr> 700<tr id="en-us_topic_0000001060267851_r95f500ef9402487ea42e829d69606f90"><td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060267851_aa7dc63d1b4924872bbff6a6a100e928f"><a name="en-us_topic_0000001060267851_aa7dc63d1b4924872bbff6a6a100e928f"></a><a name="en-us_topic_0000001060267851_aa7dc63d1b4924872bbff6a6a100e928f"></a>longpress</p> 701</td> 702<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"><a name="en-us_topic_0000001060267851_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a>-</p> 703</td> 704<td class="cellrowborder" valign="top" width="61.92999999999999%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060267851_a44b8585170304b5596c41714772e605e"><a name="en-us_topic_0000001060267851_a44b8585170304b5596c41714772e605e"></a><a name="en-us_topic_0000001060267851_a44b8585170304b5596c41714772e605e"></a>Triggered when the component is long pressed.</p> 705</td> 706</tr> 707<tr id="en-us_topic_0000001060267851_row117014569616"><td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001060267851_p12706561061"><a name="en-us_topic_0000001060267851_p12706561061"></a><a name="en-us_topic_0000001060267851_p12706561061"></a>swipe<sup id="en-us_topic_0000001060267851_sup0953742514"><a name="en-us_topic_0000001060267851_sup0953742514"></a><a name="en-us_topic_0000001060267851_sup0953742514"></a>5+</sup></p> 708</td> 709<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001060267851_en-us_topic_0000001058460527_p11711056161"><a name="en-us_topic_0000001060267851_en-us_topic_0000001058460527_p11711056161"></a><a name="en-us_topic_0000001060267851_en-us_topic_0000001058460527_p11711056161"></a><a href="universal-events.md#en-us_topic_0000001058460527_table111811577714">SwipeEvent</a></p> 710</td> 711<td class="cellrowborder" valign="top" width="61.92999999999999%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001060267851_p2711556162"><a name="en-us_topic_0000001060267851_p2711556162"></a><a name="en-us_topic_0000001060267851_p2711556162"></a>Triggered when a user quickly swipes on a component.</p> 712</td> 713</tr> 714</tbody> 715</table> 716 717## Example Code<a name="en-us_topic_0000001060267851_section3510104413431"></a> 718 719``` 720<!-- xxx.hml --> 721<div class="container"> 722 <badge class="badge" config="{{badgeconfig}}" visible="true" count="100" maxcount="99"> 723 <text class="text1">huawei</text> 724 </badge> 725 <badge class="badge" visible="true" count="0"> 726 <text class="text2">huawei</text> 727 </badge> 728</div> 729``` 730 731``` 732/* xxx.css */ 733.container { 734 flex-direction: column; 735 width: 100%; 736 align-items: center; 737} 738.badge { 739 width: 50%; 740 margin-top: 100px; 741} 742.text1 { 743 background-color: #f9a01e; 744 font-size: 50px; 745} 746.text2 { 747 background-color: #46b1e3; 748 font-size: 50px; 749} 750``` 751 752``` 753// xxx.js 754export default { 755 data:{ 756 badgeconfig:{ 757 badgeColor:"#0a59f7", 758 textColor:"#ffffff", 759 } 760 } 761} 762``` 763 764 765 766
