# Shape Clipping

Name

Type

Default Value

Description

clip

Shape | boolean

false

Specifies a clip mode. The value Shape indicates that the current component is cropped based on the specified shape. The value boolean specifies whether to clip the component based on the edge outline.

mask

Shape

-

Adds a mask of the specified shape to the current component.

## Example ``` @Entry @Component struct ClipAndMaskExample { build() { Column({ space: 5 }) { Text('clip').fontSize(9).width('90%').fontColor(0xCCCCCC) // Clip the image by using a circle with a diameter of 280px. Image('/comment/bg.jpg') .clip(new Circle({ width: 80, height: 80 })) .width('500px').height('280px') Row() { Image('/comment/bg.jpg').width('500px').height('280px') } .clip(true) .borderRadius(20) Text('mask').fontSize(9).width('90%').fontColor(0xCCCCCC) // Add a 500 px x 280 px mask to the image. Image('/comment/bg.jpg') .mask(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray)) .width('500px').height('280px') // Add a 280 px x 280 px circle mask to the image. Image('/comment/bg.jpg') .mask(new Circle({ width: '280px', height: '280px' }).fill(Color.Gray)) .width('500px').height('281px') } .width('100%') .margin({ top: 5 }) } } ``` ![](figures/clip.png)