diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/borderImage.png b/zh-cn/application-dev/reference/arkui-ts/figures/borderImage.png
index a111a8e4ed06adf129c010801d10880a22018b25..22285e0910e3c447036d2144194a2e4301c2df6f 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/borderImage.png and b/zh-cn/application-dev/reference/arkui-ts/figures/borderImage.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/borderImageGradient.png b/zh-cn/application-dev/reference/arkui-ts/figures/borderImageGradient.png
new file mode 100644
index 0000000000000000000000000000000000000000..edf91d4844deeee4f997f65d2d88b45bf7ff7f1d
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/borderImageGradient.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
index 0bedbd2b915ad4facda451efeb8c1d0bfbb63ece..ca42d63a08616226c97fba1f376c95eea8d3ec73 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
@@ -43,13 +43,10 @@
 @Entry
 @Component
 struct Index {
-  @State message: string = 'This is\nborderImage.'
-  @State message2: string = 'This is\ngradient color.'
-
   build() {
     Row() {
       Column() {
-        Text(this.message).textAlign(TextAlign.Center)
+        Text('This is\nborderImage.').textAlign(TextAlign.Center)
           .borderImage({
             source: "borderOrigin.png",
             slice: {top:"31%", bottom:"31%", left:"31%", right:"31%"},
@@ -58,8 +55,26 @@ struct Index {
             repeat: RepeatMode.Repeat,
             fill: false
           });
-        Text(this.message2).textAlign(TextAlign.Center)
-          .margin(10)
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+![zh-cn_image_borderImage](figures/borderImage.png)
+
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Index {
+  build() {
+    Row() {
+      Column() {
+        Text('This is\ngradient color.').textAlign(TextAlign.Center)
           .borderImage({
             source: {angle:90,
               direction: GradientDirection.Left,
@@ -77,4 +92,4 @@ struct Index {
 }
 ```
 
-![zh-cn_image_borderImage](figures/borderImage.png)
+![zh-cn_image_borderImageGradient](figures/borderImageGradient.png)