# Rect The **** component is used to draw a rectangle. ## Child Components None ## APIs Rect\(value:\{options?: \{width: Length,height: Length,radius?: Length | Array\} | \{width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length\}\}\) - Parameters

Name	Type	Mandatory	Default Value	Description
options	Object	No	-	For details, see the options parameters.

- options parameters

Name	Type	Mandatory	Default Value	Description
width	Length	Yes	-	Width.
height	Length	Yes	-	Height.
radius	Length \| Array<Length>	No	0	Radius of a rounded corner. You can set the radius of four rounded corners.
radiusWidth	Length	No	0	Width of the rounded corner.
radiusHeight	Length	No	0	Height of the rounded corner.

## Attributes

Name	Type	Mandatory	Description
width	Length	No	Width.
height	Length	No	Height.
radiusWidth	Length	No	Width of a rounded corner. The width and height are the same when only the width is set.
radiusHeight	Length	No	Height of the rounded corner. The width and height are the same only when the height is set.
radius	Length \| Array<Length>	No	Size of the rounded corner.

## Example ``` @Entry @Component struct RectExample { build() { Column({ space: 5 }) { Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%') // Draw a 90% x 50 rectangle. Rect({ width: '90%', height: 50 }) // Draw a 90% x 50 rectangle. Rect().width('90%').height(50) Text('with rounded corners').fontSize(9).fontColor(0xCCCCCC).width('90%') // Draw a 90% x 50 rectangle with the width and height of the rounded corner being 20. Rect({ width: '90%', height: 50 }).radiusHeight(20).radiusWidth(20) // Draw a 90% x 50 rectangle with the width and height of the rounded corner being 20. Rect({ width: '90%', height: 50 }).radius(20) }.width('100%').margin({ top: 5 }) } } ``` ![](figures/rect.png)