Bugfix: unfocusable when bind onclick

Signed-off-by: bixuefeng <bixuefeng@huawei.com> Change-Id: Iffbcc198bc3a56ec5622989e2589956f465ae380
2026-07-19 14:43:36 -04:00 · 2022-04-21 10:49:56 +08:00
parent b5d5a246e7
commit 0467d0deef
9 changed files with 600 additions and 282 deletions
@@ -376,8 +376,10 @@ void JSButton::JsOnClick(const JSCallbackInfo& info)
        if (buttonComponent) {
            buttonComponent->SetKeyEnterEventId(clickEventId);
        }
-        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent();
-        focusableComponent->SetOnClickId(clickEventId);
+        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent(false);
+        if (focusableComponent) {
+            focusableComponent->SetOnClickId(clickEventId);
+        }
    }
 }

@@ -402,7 +402,7 @@ void JSImage::JSBind(BindingTarget globalObj)
    JSClass<JSImage>::StaticMethod("renderMode", &JSImage::SetImageRenderMode, opt);
    JSClass<JSImage>::StaticMethod("objectRepeat", &JSImage::SetImageRepeat, opt);
    JSClass<JSImage>::StaticMethod("interpolation", &JSImage::SetImageInterpolation, opt);
-    JSClass<JSImage>::StaticMethod("borderStyle", &JSViewAbstract::SetBorderStyle, opt);
+    JSClass<JSImage>::StaticMethod("borderStyle", &JSViewAbstract::JsBorderStyle);
    JSClass<JSImage>::StaticMethod("borderColor", &JSViewAbstract::JsBorderColor);
    JSClass<JSImage>::StaticMethod("border", &JSImage::JsBorder);
    JSClass<JSImage>::StaticMethod("borderWidth", &JSViewAbstract::JsBorderWidth);
@@ -72,9 +72,10 @@ void JSInteractableView::JsOnKey(const JSCallbackInfo& args)
                func->Execute(*keyInfo);
            },
            "onKey", 0);
-        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent();
-        focusableComponent->SetFocusable(true);
-        focusableComponent->SetOnKeyId(onKeyId);
+        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent(false);
+        if (focusableComponent) {
+            focusableComponent->SetOnKeyId(onKeyId);
+        }
    }
 }

@@ -116,8 +117,10 @@ void JSInteractableView::JsOnDelete(const JSCallbackInfo& info)
            ACE_SCORING_EVENT("onDelete");
            func->Execute();
        });
-        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent();
-        focusableComponent->SetOnDeleteId(onDeleteId);
+        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent(false);
+        if (focusableComponent) {
+            focusableComponent->SetOnDeleteId(onDeleteId);
+        }
    }
 }

@@ -142,8 +145,10 @@ void JSInteractableView::JsOnClick(const JSCallbackInfo& info)
        }

        auto onClickId = GetClickEventMarker(info);
-        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent();
-        focusableComponent->SetOnClickId(onClickId);
+        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent(false);
+        if (focusableComponent) {
+            focusableComponent->SetOnClickId(onClickId);
+        }
    }
 }

@@ -389,8 +389,10 @@ void JSText::JsOnClick(const JSCallbackInfo& info)
            component->SetOnClick(onClickId);
        }

-        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent();
-        focusableComponent->SetOnClickId(onClickId);
+        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent(false);
+        if (focusableComponent) {
+            focusableComponent->SetOnClickId(onClickId);
+        }
    }
 }

@@ -59,8 +59,8 @@ const std::regex RESOURCE_APP_STRING_PLACEHOLDER(R"(\%((\d+)(\$)){0,1}([dsf]))",
 constexpr double FULL_DIMENSION = 100.0;
 constexpr double HALF_DIMENSION = 50.0;

-bool CheckJSCallbackInfo(const std::string& callerName, const JSCallbackInfo& info,
-    std::vector<JSCallbackInfoType>& infoTypes)
+bool CheckJSCallbackInfo(
+    const std::string& callerName, const JSCallbackInfo& info, std::vector<JSCallbackInfoType>& infoTypes)
 {
    if (info.Length() < 1) {
        LOGE("%{public}s: The arg is supposed to have at least one argument", callerName.c_str());
@@ -103,8 +103,8 @@ bool CheckJSCallbackInfo(const std::string& callerName, const JSCallbackInfo& in
        }
    }
    if (!typeVerified) {
-        LOGE("%{public}s: info[0] is not a [%{public}s]",
-            callerName.c_str(), unrecognizedType.substr(0, unrecognizedType.size()-1).c_str());
+        LOGE("%{public}s: info[0] is not a [%{public}s]", callerName.c_str(),
+            unrecognizedType.substr(0, unrecognizedType.size() - 1).c_str());
    }
    return typeVerified || infoTypes.size() == 0;
 }
@@ -297,8 +297,8 @@ bool ParseMotionPath(const std::unique_ptr<JsonValue>& argsPtrItem, MotionPathOp
    return false;
 }

-void SetBgImgPosition(const DimensionUnit& typeX, const DimensionUnit& typeY,
-    const double valueX, const double valueY, BackgroundImagePosition& bgImgPosition)
+void SetBgImgPosition(const DimensionUnit& typeX, const DimensionUnit& typeY, const double valueX, const double valueY,
+    BackgroundImagePosition& bgImgPosition)
 {
    AnimationOption option = ViewStackProcessor::GetInstance()->GetImplicitAnimationOption();
    bgImgPosition.SetSizeX(AnimatableDimension(valueX, typeX, option));
@@ -365,7 +365,7 @@ void ReplaceHolder(std::string& originStr, JSRef<JSArray> params, int32_t contai

 bool ParseLocationProps(const JSCallbackInfo& info, AnimatableDimension& x, AnimatableDimension& y)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("ParseLocationProps", info, checkList)) {
        return false;
    }
@@ -388,8 +388,8 @@ void ParseShowObject(
    if (changeEventVal->IsFunction()) {
        RefPtr<JsFunction> jsFunc =
            AceType::MakeRefPtr<JsFunction>(JSRef<JSObject>(), JSRef<JSFunc>::Cast(changeEventVal));
-        auto eventMarker = EventMarker(
-            [execCtx = info.GetExecutionContext(), func = std::move(jsFunc)](const std::string& param) {
+        auto eventMarker =
+            EventMarker([execCtx = info.GetExecutionContext(), func = std::move(jsFunc)](const std::string& param) {
                JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx);
                ACE_SCORING_EVENT("Popup.onStateChange");

@@ -571,7 +571,7 @@ uint32_t ColorAlphaAdapt(uint32_t origin)
 void JSViewAbstract::JsScale(const JSCallbackInfo& info)
 {
    LOGD("JsScale");
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::NUMBER, JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::NUMBER, JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("JsScale", info, checkList)) {
        return;
    }
@@ -659,12 +659,11 @@ void JSViewAbstract::JsOpacity(const JSCallbackInfo& info)
    if (!stack->IsVisualStateSet()) {
        display->SetOpacity(opacity, option);
    } else {
-        display->GetStateAttributes()->AddAttribute<AnimatableDouble>(DisplayStateAttribute::OPACITY,
-            AnimatableDouble(opacity, option), stack->GetVisualState());
-        if (!display->GetStateAttributes()->
-            HasAttribute(DisplayStateAttribute::OPACITY, VisualState::NORMAL)) {
-            display->GetStateAttributes()->AddAttribute<AnimatableDouble>(DisplayStateAttribute::OPACITY,
-                AnimatableDouble(display->GetOpacity(), option), VisualState::NORMAL);
+        display->GetStateAttributes()->AddAttribute<AnimatableDouble>(
+            DisplayStateAttribute::OPACITY, AnimatableDouble(opacity, option), stack->GetVisualState());
+        if (!display->GetStateAttributes()->HasAttribute(DisplayStateAttribute::OPACITY, VisualState::NORMAL)) {
+            display->GetStateAttributes()->AddAttribute<AnimatableDouble>(
+                DisplayStateAttribute::OPACITY, AnimatableDouble(display->GetOpacity(), option), VisualState::NORMAL);
        }
    }
 }
@@ -738,7 +737,7 @@ void JSViewAbstract::JsTranslateY(const JSCallbackInfo& info)
 void JSViewAbstract::JsRotate(const JSCallbackInfo& info)
 {
    LOGD("JsRotate");
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::NUMBER, JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::NUMBER, JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("JsRotate", info, checkList)) {
        return;
    }
@@ -815,7 +814,7 @@ void JSViewAbstract::JsRotateY(const JSCallbackInfo& info)
 void JSViewAbstract::JsTransform(const JSCallbackInfo& info)
 {
    LOGD("JsTransform");
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("JsTransform", info, checkList)) {
        return;
    }
@@ -910,12 +909,11 @@ bool JSViewAbstract::JsWidth(const JSRef<JSVal>& jsValue)
    if (!stack->IsVisualStateSet()) {
        box->SetWidth(value, option);
    } else {
-        box->GetStateAttributes()->AddAttribute<AnimatableDimension>(BoxStateAttribute::WIDTH,
-            AnimatableDimension(value, option), stack->GetVisualState());
-        if (!box->GetStateAttributes()->
-            HasAttribute(BoxStateAttribute::WIDTH, VisualState::NORMAL)) {
-            box->GetStateAttributes()->AddAttribute<AnimatableDimension>(BoxStateAttribute::WIDTH,
-                AnimatableDimension(box->GetWidth(), option), VisualState::NORMAL);
+        box->GetStateAttributes()->AddAttribute<AnimatableDimension>(
+            BoxStateAttribute::WIDTH, AnimatableDimension(value, option), stack->GetVisualState());
+        if (!box->GetStateAttributes()->HasAttribute(BoxStateAttribute::WIDTH, VisualState::NORMAL)) {
+            box->GetStateAttributes()->AddAttribute<AnimatableDimension>(
+                BoxStateAttribute::WIDTH, AnimatableDimension(box->GetWidth(), option), VisualState::NORMAL);
        }
    }
    return true;
@@ -957,12 +955,11 @@ bool JSViewAbstract::JsHeight(const JSRef<JSVal>& jsValue)
    if (!stack->IsVisualStateSet()) {
        box->SetHeight(value, option);
    } else {
-        box->GetStateAttributes()->AddAttribute<AnimatableDimension>(BoxStateAttribute::HEIGHT,
-            AnimatableDimension(value, option), stack->GetVisualState());
-        if (!box->GetStateAttributes()->
-            HasAttribute(BoxStateAttribute::HEIGHT, VisualState::NORMAL)) {
-            box->GetStateAttributes()->AddAttribute<AnimatableDimension>(BoxStateAttribute::HEIGHT,
-                AnimatableDimension(box->GetHeight(), option), VisualState::NORMAL);
+        box->GetStateAttributes()->AddAttribute<AnimatableDimension>(
+            BoxStateAttribute::HEIGHT, AnimatableDimension(value, option), stack->GetVisualState());
+        if (!box->GetStateAttributes()->HasAttribute(BoxStateAttribute::HEIGHT, VisualState::NORMAL)) {
+            box->GetStateAttributes()->AddAttribute<AnimatableDimension>(
+                BoxStateAttribute::HEIGHT, AnimatableDimension(box->GetHeight(), option), VisualState::NORMAL);
        }
    }
    return true;
@@ -1086,7 +1083,7 @@ bool JSViewAbstract::ParseJsResponseRegionArray(const JSRef<JSVal>& jsValue, std

 void JSViewAbstract::JsSize(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("JsSize", info, checkList)) {
        return;
    }
@@ -1098,7 +1095,7 @@ void JSViewAbstract::JsSize(const JSCallbackInfo& info)

 void JSViewAbstract::JsConstraintSize(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("JsConstraintSize", info, checkList)) {
        return;
    }
@@ -1138,7 +1135,7 @@ void JSViewAbstract::JsConstraintSize(const JSCallbackInfo& info)

 void JSViewAbstract::JsLayoutPriority(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::STRING, JSCallbackInfoType::NUMBER};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::STRING, JSCallbackInfoType::NUMBER };
    if (!CheckJSCallbackInfo("JsLayoutPriority", info, checkList)) {
        return;
    }
@@ -1156,7 +1153,7 @@ void JSViewAbstract::JsLayoutPriority(const JSCallbackInfo& info)

 void JSViewAbstract::JsLayoutWeight(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::STRING, JSCallbackInfoType::NUMBER};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::STRING, JSCallbackInfoType::NUMBER };
    if (!CheckJSCallbackInfo("JsLayoutWeight", info, checkList)) {
        return;
    }
@@ -1174,7 +1171,7 @@ void JSViewAbstract::JsLayoutWeight(const JSCallbackInfo& info)

 void JSViewAbstract::JsAlign(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::NUMBER};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::NUMBER };
    if (!CheckJSCallbackInfo("JsAlign", info, checkList)) {
        return;
    }
@@ -1267,7 +1264,7 @@ void JSViewAbstract::JsAspectRatio(const JSCallbackInfo& info)

 void JSViewAbstract::JsOverlay(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::STRING};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::STRING };
    if (!CheckJSCallbackInfo("JsOverlay", info, checkList)) {
        return;
    }
@@ -1402,7 +1399,7 @@ void JSViewAbstract::JsDisplayPriority(const JSCallbackInfo& info)

 void JSViewAbstract::JsSharedTransition(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::STRING};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::STRING };
    if (!CheckJSCallbackInfo("JsSharedTransition", info, checkList)) {
        return;
    }
@@ -1482,7 +1479,7 @@ void JSViewAbstract::JsSharedTransition(const JSCallbackInfo& info)

 void JSViewAbstract::JsGeometryTransition(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::STRING};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::STRING };
    if (!CheckJSCallbackInfo("JsGeometryTransition", info, checkList)) {
        return;
    }
@@ -1502,7 +1499,7 @@ void JSViewAbstract::JsGeometryTransition(const JSCallbackInfo& info)

 void JSViewAbstract::JsAlignSelf(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::NUMBER};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::NUMBER };
    if (!CheckJSCallbackInfo("JsAlignSelf", info, checkList)) {
        return;
    }
@@ -1514,38 +1511,6 @@ void JSViewAbstract::JsAlignSelf(const JSCallbackInfo& info)
    }
 }

-void JSViewAbstract::JsBorderColor(const JSCallbackInfo& info)
-{
-    if (info.Length() < 1) {
-        LOGE("The argv is wrong, it is supposed to have at least 1 argument");
-        return;
-    }
-    Color borderColor;
-    if (!ParseJsColor(info[0], borderColor)) {
-        return;
-    }
-
-    auto stack = ViewStackProcessor::GetInstance();
-    auto option = stack->GetImplicitAnimationOption();
-    if (!stack->IsVisualStateSet()) {
-        BoxComponentHelper::SetBorderColor(GetBackDecoration(), borderColor, option);
-    } else {
-        auto boxComponent = AceType::DynamicCast<BoxComponent>(stack->GetBoxComponent());
-        if (!boxComponent) {
-            LOGE("boxComponent is null");
-            return;
-        }
-        boxComponent->GetStateAttributes()->AddAttribute<AnimatableColor>(BoxStateAttribute::BORDER_COLOR,
-            AnimatableColor(borderColor, option), stack->GetVisualState());
-        if (!boxComponent->GetStateAttributes()->
-            HasAttribute(BoxStateAttribute::BORDER_COLOR, VisualState::NORMAL)) {
-            auto c = BoxComponentHelper::GetBorderColor(GetBackDecoration());
-            boxComponent->GetStateAttributes()->AddAttribute<AnimatableColor>(BoxStateAttribute::BORDER_COLOR,
-                AnimatableColor(c, option), VisualState::NORMAL);
-        }
-    }
-}
-
 void JSViewAbstract::JsBackgroundColor(const JSCallbackInfo& info)
 {
    if (info.Length() < 1) {
@@ -1567,13 +1532,12 @@ void JSViewAbstract::JsBackgroundColor(const JSCallbackInfo& info)
    if (!stack->IsVisualStateSet()) {
        boxComponent->SetColor(backgroundColor, option);
    } else {
-        boxComponent->GetStateAttributes()->AddAttribute<AnimatableColor>(BoxStateAttribute::COLOR,
-            AnimatableColor(backgroundColor, option), stack->GetVisualState());
-        if (!boxComponent->GetStateAttributes()->
-            HasAttribute(BoxStateAttribute::COLOR, VisualState::NORMAL)) {
+        boxComponent->GetStateAttributes()->AddAttribute<AnimatableColor>(
+            BoxStateAttribute::COLOR, AnimatableColor(backgroundColor, option), stack->GetVisualState());
+        if (!boxComponent->GetStateAttributes()->HasAttribute(BoxStateAttribute::COLOR, VisualState::NORMAL)) {
            Color c = boxComponent->GetColor();
-            boxComponent->GetStateAttributes()->AddAttribute<AnimatableColor>(BoxStateAttribute::COLOR,
-                AnimatableColor(c, option), VisualState::NORMAL);
+            boxComponent->GetStateAttributes()->AddAttribute<AnimatableColor>(
+                BoxStateAttribute::COLOR, AnimatableColor(c, option), VisualState::NORMAL);
        }
    }
 }
@@ -1620,7 +1584,7 @@ void JSViewAbstract::JsBackgroundImage(const JSCallbackInfo& info)

 void JSViewAbstract::JsBackgroundImageSize(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::NUMBER, JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::NUMBER, JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("JsBackgroundImageSize", info, checkList)) {
        return;
    }
@@ -1671,7 +1635,7 @@ void JSViewAbstract::JsBackgroundImageSize(const JSCallbackInfo& info)

 void JSViewAbstract::JsBackgroundImagePosition(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::NUMBER, JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::NUMBER, JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("JsBackgroundImagePosition", info, checkList)) {
        return;
    }
@@ -1689,40 +1653,35 @@ void JSViewAbstract::JsBackgroundImagePosition(const JSCallbackInfo& info)
        int32_t align = info[0]->ToNumber<int32_t>();
        switch (align) {
            case 0:
-                SetBgImgPosition(DimensionUnit::PERCENT, DimensionUnit::PERCENT,
-                    0.0, 0.0, bgImgPosition);
+                SetBgImgPosition(DimensionUnit::PERCENT, DimensionUnit::PERCENT, 0.0, 0.0, bgImgPosition);
                break;
            case 1:
-                SetBgImgPosition(DimensionUnit::PERCENT, DimensionUnit::PERCENT,
-                    HALF_DIMENSION, 0.0, bgImgPosition);
+                SetBgImgPosition(DimensionUnit::PERCENT, DimensionUnit::PERCENT, HALF_DIMENSION, 0.0, bgImgPosition);
                break;
            case 2:
-                SetBgImgPosition(DimensionUnit::PERCENT, DimensionUnit::PERCENT,
-                    FULL_DIMENSION, 0.0, bgImgPosition);
+                SetBgImgPosition(DimensionUnit::PERCENT, DimensionUnit::PERCENT, FULL_DIMENSION, 0.0, bgImgPosition);
                break;
            case 3:
-                SetBgImgPosition(DimensionUnit::PERCENT, DimensionUnit::PERCENT,
-                    0.0, HALF_DIMENSION, bgImgPosition);
+                SetBgImgPosition(DimensionUnit::PERCENT, DimensionUnit::PERCENT, 0.0, HALF_DIMENSION, bgImgPosition);
                break;
            case 4:
-                SetBgImgPosition(DimensionUnit::PERCENT, DimensionUnit::PERCENT,
-                    HALF_DIMENSION, HALF_DIMENSION, bgImgPosition);
+                SetBgImgPosition(
+                    DimensionUnit::PERCENT, DimensionUnit::PERCENT, HALF_DIMENSION, HALF_DIMENSION, bgImgPosition);
                break;
            case 5:
-                SetBgImgPosition(DimensionUnit::PERCENT, DimensionUnit::PERCENT,
-                    FULL_DIMENSION, HALF_DIMENSION, bgImgPosition);
+                SetBgImgPosition(
+                    DimensionUnit::PERCENT, DimensionUnit::PERCENT, FULL_DIMENSION, HALF_DIMENSION, bgImgPosition);
                break;
            case 6:
-                SetBgImgPosition(DimensionUnit::PERCENT, DimensionUnit::PERCENT,
-                    0.0, FULL_DIMENSION, bgImgPosition);
+                SetBgImgPosition(DimensionUnit::PERCENT, DimensionUnit::PERCENT, 0.0, FULL_DIMENSION, bgImgPosition);
                break;
            case 7:
-                SetBgImgPosition(DimensionUnit::PERCENT, DimensionUnit::PERCENT,
-                    HALF_DIMENSION, FULL_DIMENSION, bgImgPosition);
+                SetBgImgPosition(
+                    DimensionUnit::PERCENT, DimensionUnit::PERCENT, HALF_DIMENSION, FULL_DIMENSION, bgImgPosition);
                break;
            case 8:
-                SetBgImgPosition(DimensionUnit::PERCENT, DimensionUnit::PERCENT,
-                    FULL_DIMENSION, FULL_DIMENSION, bgImgPosition);
+                SetBgImgPosition(
+                    DimensionUnit::PERCENT, DimensionUnit::PERCENT, FULL_DIMENSION, FULL_DIMENSION, bgImgPosition);
                break;
            default:
                break;
@@ -1896,7 +1855,7 @@ void JSViewAbstract::ParseMarginOrPadding(const JSCallbackInfo& info, bool isMar

 void JSViewAbstract::JsBorder(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("JsBorder", info, checkList)) {
        return;
    }
@@ -1914,117 +1873,302 @@ void JSViewAbstract::JsBorder(const JSCallbackInfo& info)
        LOGE("boxComponent is null");
        return;
    }
-    Dimension width;
-    if (argsPtrItem->Contains("width") && ParseJsonDimensionVp(argsPtrItem->GetValue("width"), width)) {
-        if (!stack->IsVisualStateSet()) {
-            BoxComponentHelper::SetBorderWidth(GetBackDecoration(), width, option);
-        } else {
-            boxComponent->GetStateAttributes()->AddAttribute<AnimatableDimension>
-                (BoxStateAttribute::BORDER_WIDTH, AnimatableDimension(width, option), stack->GetVisualState());
-            if (!boxComponent->GetStateAttributes()->
-                HasAttribute(BoxStateAttribute::BORDER_WIDTH, VisualState::NORMAL)) {
-                boxComponent->GetStateAttributes()->AddAttribute<AnimatableDimension>(BoxStateAttribute::BORDER_WIDTH,
-                    AnimatableDimension(BoxComponentHelper::GetBorderWidth(GetBackDecoration()), option),
-                    VisualState::NORMAL);
-            }
-        }
+    if (argsPtrItem->Contains("width")) {
+        auto widthArgs = argsPtrItem->GetValue("width");
+        ParseBorderWidth(widthArgs);
    }
-    Color color;
-    if (argsPtrItem->Contains("color") && ParseJsonColor(argsPtrItem->GetValue("color"), color)) {
-        if (!stack->IsVisualStateSet()) {
-            BoxComponentHelper::SetBorderColor(GetBackDecoration(), color, option);
-        } else {
-            boxComponent->GetStateAttributes()->AddAttribute<AnimatableColor>(BoxStateAttribute::BORDER_COLOR,
-                AnimatableColor(color, option), stack->GetVisualState());
-            if (!boxComponent->GetStateAttributes()->
-                HasAttribute(BoxStateAttribute::BORDER_COLOR, VisualState::NORMAL)) {
-                Color c = BoxComponentHelper::GetBorderColor(GetBackDecoration());
-                boxComponent->GetStateAttributes()->AddAttribute<AnimatableColor>
-                    (BoxStateAttribute::BORDER_COLOR, AnimatableColor(c, option), VisualState::NORMAL);
-            }
-        }
+    if (argsPtrItem->Contains("color")) {
+        auto colorArgs = argsPtrItem->GetValue("color");
+        ParseBorderColor(colorArgs);
    }
-    Dimension radius;
-    if (argsPtrItem->Contains("radius") && ParseJsonDimensionVp(argsPtrItem->GetValue("radius"), radius)) {
-        if (!stack->IsVisualStateSet()) {
-            BoxComponentHelper::SetBorderRadius(GetBackDecoration(), radius, option);
-        } else {
-            boxComponent->GetStateAttributes()->AddAttribute<AnimatableDimension>(BoxStateAttribute::BORDER_RADIUS,
-                AnimatableDimension(radius, option), stack->GetVisualState());
-            if (!boxComponent->GetStateAttributes()->
-                HasAttribute(BoxStateAttribute::BORDER_RADIUS, VisualState::NORMAL)) {
-                boxComponent->GetStateAttributes()->AddAttribute<AnimatableDimension>(BoxStateAttribute::BORDER_RADIUS,
-                    AnimatableDimension(BoxComponentHelper::GetBorderRadius(GetBackDecoration()).GetX(), option),
-                    VisualState::NORMAL);
-            }
-        }
+    if (argsPtrItem->Contains("radius")) {
+        auto radiusArgs = argsPtrItem->GetValue("radius");
+        ParseBorderRadius(radiusArgs);
    }
    if (argsPtrItem->Contains("style")) {
-        auto borderStyle = argsPtrItem->GetInt("style", static_cast<int32_t>(BorderStyle::SOLID));
-        SetBorderStyle(borderStyle);
+        auto styleArgs = argsPtrItem->GetValue("style");
+        ParseBorderStyle(styleArgs);
    }
    info.ReturnSelf();
 }

 void JSViewAbstract::JsBorderWidth(const JSCallbackInfo& info)
 {
-    if (info.Length() < 1) {
-        LOGE("The argv is wrong, it is supposed to have at least 1 argument");
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::STRING, JSCallbackInfoType::NUMBER,
+        JSCallbackInfoType::OBJECT };
+    if (!CheckJSCallbackInfo("JsBorderWidth", info, checkList)) {
        return;
    }
-    Dimension borderWidth;
-    if (!ParseJsDimensionVp(info[0], borderWidth)) {
-        return;
+
+    std::unique_ptr<JsonValue> argsPtrItem;
+    if (info[0]->IsObject()) {
+        argsPtrItem = JsonUtil::ParseJsonString(info[0]->ToString());
+        if (!argsPtrItem || argsPtrItem->IsNull()) {
+            LOGE("Js Parse object failed. argsPtr is null. %s", info[0]->ToString().c_str());
+            return;
+        }
+    } else {
+        argsPtrItem = JsonUtil::Create(true);
+        argsPtrItem->Put("left", info[0]->ToString().c_str());
+        argsPtrItem->Put("right", info[0]->ToString().c_str());
+        argsPtrItem->Put("top", info[0]->ToString().c_str());
+        argsPtrItem->Put("bottom", info[0]->ToString().c_str());
+    }
+    ParseBorderWidth(argsPtrItem);
+}
+
+void JSViewAbstract::ParseBorderWidth(std::unique_ptr<JsonValue>& args)
+{
+    Dimension leftDimen;
+    Dimension rightDimen;
+    Dimension topDimen;
+    Dimension bottomDimen;
+    if (args->Contains("left") || args->Contains("right") || args->Contains("top") || args->Contains("bottom")) {
+        leftDimen = BoxComponentHelper::GetBorderLeftWidth(GetBackDecoration());
+        rightDimen = BoxComponentHelper::GetBorderRightWidth(GetBackDecoration());
+        topDimen = BoxComponentHelper::GetBorderTopWidth(GetBackDecoration());
+        bottomDimen = BoxComponentHelper::GetBorderBottomWidth(GetBackDecoration());
+        ParseJsonDimensionVp(args->GetValue("left"), leftDimen);
+        ParseJsonDimensionVp(args->GetValue("right"), rightDimen);
+        ParseJsonDimensionVp(args->GetValue("top"), topDimen);
+        ParseJsonDimensionVp(args->GetValue("bottom"), bottomDimen);
+    } else {
+        Dimension borderWidth;
+        if (!ParseJsonDimensionVp(args, borderWidth)) {
+            return;
+        }
+        leftDimen = borderWidth;
+        rightDimen = borderWidth;
+        topDimen = borderWidth;
+        bottomDimen = borderWidth;
    }
    auto stack = ViewStackProcessor::GetInstance();
    AnimationOption option = stack->GetImplicitAnimationOption();
-    if (!ViewStackProcessor::GetInstance()->IsVisualStateSet()) {
-        BoxComponentHelper::SetBorderWidth(GetBackDecoration(), borderWidth, option);
+    if (!stack->IsVisualStateSet()) {
+        BoxComponentHelper::SetBorderWidth(GetBackDecoration(), leftDimen, rightDimen, topDimen, bottomDimen, option);
    } else {
        auto boxComponent = AceType::DynamicCast<BoxComponent>(stack->GetBoxComponent());
        if (!boxComponent) {
            LOGE("boxComponent is null");
            return;
        }
-        boxComponent->GetStateAttributes()->AddAttribute<AnimatableDimension>
-            (BoxStateAttribute::BORDER_WIDTH, AnimatableDimension(borderWidth, option), stack->GetVisualState());
-        if (!boxComponent->GetStateAttributes()->
-            HasAttribute(BoxStateAttribute::BORDER_WIDTH, VisualState::NORMAL)) {
-            boxComponent->GetStateAttributes()->AddAttribute<AnimatableDimension>(
-                BoxStateAttribute::BORDER_WIDTH,
+        boxComponent->GetStateAttributes()->AddAttribute<AnimatableDimension>(
+            BoxStateAttribute::BORDER_WIDTH, AnimatableDimension(leftDimen, option), stack->GetVisualState());
+        if (!boxComponent->GetStateAttributes()->HasAttribute(BoxStateAttribute::BORDER_WIDTH, VisualState::NORMAL)) {
+            boxComponent->GetStateAttributes()->AddAttribute<AnimatableDimension>(BoxStateAttribute::BORDER_WIDTH,
                AnimatableDimension(BoxComponentHelper::GetBorderWidth(GetBackDecoration()), option),
                VisualState::NORMAL);
        }
    }
 }

-void JSViewAbstract::JsBorderRadius(const JSCallbackInfo& info)
+void JSViewAbstract::JsBorderColor(const JSCallbackInfo& info)
 {
-    if (info.Length() < 1) {
-        LOGE("The argv is wrong, it is supposed to have at least 1 argument");
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::STRING, JSCallbackInfoType::NUMBER,
+        JSCallbackInfoType::OBJECT };
+    if (!CheckJSCallbackInfo("JsBorderColor", info, checkList)) {
        return;
    }
-    Dimension borderRadius;
-    if (!ParseJsDimensionVp(info[0], borderRadius)) {
-        return;
+
+    auto argsPtrItem = JsonUtil::ParseJsonString(info[0]->ToString());
+    if (info[0]->IsObject()) {
+        argsPtrItem = JsonUtil::ParseJsonString(info[0]->ToString());
+        if (!argsPtrItem || argsPtrItem->IsNull()) {
+            LOGE("Js Parse object failed. argsPtr is null. %s", info[0]->ToString().c_str());
+            return;
+        }
+    } else {
+        argsPtrItem = JsonUtil::Create(true);
+        argsPtrItem->Put("left", info[0]->ToString().c_str());
+        argsPtrItem->Put("right", info[0]->ToString().c_str());
+        argsPtrItem->Put("top", info[0]->ToString().c_str());
+        argsPtrItem->Put("bottom", info[0]->ToString().c_str());
+    }
+    ParseBorderColor(argsPtrItem);
+}
+
+void JSViewAbstract::ParseBorderColor(std::unique_ptr<JsonValue>& args)
+{
+    Color topColor;
+    Color bottomColor;
+    Color leftColor;
+    Color rightColor;
+    if (args->Contains("left") || args->Contains("right") || args->Contains("top") || args->Contains("bottom")) {
+        leftColor = BoxComponentHelper::GetBorderColorLeft(GetBackDecoration());
+        rightColor = BoxComponentHelper::GetBorderColorRight(GetBackDecoration());
+        topColor = BoxComponentHelper::GetBorderColorTop(GetBackDecoration());
+        bottomColor = BoxComponentHelper::GetBorderColorBottom(GetBackDecoration());
+        ParseJsonColor(args->GetValue("left"), leftColor);
+        ParseJsonColor(args->GetValue("right"), rightColor);
+        ParseJsonColor(args->GetValue("top"), topColor);
+        ParseJsonColor(args->GetValue("bottom"), bottomColor);
+    } else {
+        Color borderColor;
+        if (!ParseJsonColor(args, borderColor)) {
+            return;
+        }
+        leftColor = borderColor;
+        rightColor = borderColor;
+        topColor = borderColor;
+        bottomColor = borderColor;
    }
    auto stack = ViewStackProcessor::GetInstance();
    AnimationOption option = stack->GetImplicitAnimationOption();
    if (!stack->IsVisualStateSet()) {
-        SetBorderRadius(borderRadius, option);
+        BoxComponentHelper::SetBorderColor(GetBackDecoration(), leftColor, rightColor, topColor, bottomColor, option);
    } else {
        auto boxComponent = AceType::DynamicCast<BoxComponent>(stack->GetBoxComponent());
        if (!boxComponent) {
            LOGE("boxComponent is null");
            return;
        }
-        boxComponent->GetStateAttributes()->AddAttribute<AnimatableDimension>(BoxStateAttribute::BORDER_RADIUS,
-            AnimatableDimension(borderRadius, option), stack->GetVisualState());
-        if (!boxComponent->GetStateAttributes()->
-            HasAttribute(BoxStateAttribute::BORDER_RADIUS, VisualState::NORMAL)) {
-            boxComponent->GetStateAttributes()->AddAttribute<AnimatableDimension>(BoxStateAttribute::BORDER_RADIUS,
-            AnimatableDimension(
-                BoxComponentHelper::GetBorderRadius(GetBackDecoration()).GetX(), option), VisualState::NORMAL);
+        boxComponent->GetStateAttributes()->AddAttribute<AnimatableColor>(
+            BoxStateAttribute::BORDER_COLOR, AnimatableColor(leftColor, option), stack->GetVisualState());
+        if (!boxComponent->GetStateAttributes()->HasAttribute(BoxStateAttribute::BORDER_COLOR, VisualState::NORMAL)) {
+            auto c = BoxComponentHelper::GetBorderColor(GetBackDecoration());
+            boxComponent->GetStateAttributes()->AddAttribute<AnimatableColor>(
+                BoxStateAttribute::BORDER_COLOR, AnimatableColor(c, option), VisualState::NORMAL);
+        }
+    }
+}
+
+void JSViewAbstract::JsBorderRadius(const JSCallbackInfo& info)
+{
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::STRING, JSCallbackInfoType::NUMBER,
+        JSCallbackInfoType::OBJECT };
+    if (!CheckJSCallbackInfo("JsBorderRadius", info, checkList)) {
+        return;
+    }
+
+    auto argsPtrItem = JsonUtil::ParseJsonString(info[0]->ToString());
+    if (info[0]->IsObject()) {
+        argsPtrItem = JsonUtil::ParseJsonString(info[0]->ToString());
+        if (!argsPtrItem || argsPtrItem->IsNull()) {
+            LOGE("Js Parse object failed. argsPtr is null. %s", info[0]->ToString().c_str());
+            return;
+        }
+    } else {
+        argsPtrItem = JsonUtil::Create(true);
+        argsPtrItem->Put("topLeft", info[0]->ToString().c_str());
+        argsPtrItem->Put("topRight", info[0]->ToString().c_str());
+        argsPtrItem->Put("bottomLeft", info[0]->ToString().c_str());
+        argsPtrItem->Put("bottomRight", info[0]->ToString().c_str());
+    }
+    ParseBorderRadius(argsPtrItem);
+}
+
+void JSViewAbstract::ParseBorderRadius(std::unique_ptr<JsonValue>& args)
+{
+    Dimension radiusTopLeft;
+    Dimension radiusTopRight;
+    Dimension radiusBottomLeft;
+    Dimension radiusBottomRight;
+    if (args->Contains("topLeft") || args->Contains("topRight") || args->Contains("bottomLeft") ||
+        args->Contains("bottomRight")) {
+        radiusTopLeft = BoxComponentHelper::GetBorderRadiusTopLeft(GetBackDecoration()).GetX();
+        radiusTopRight = BoxComponentHelper::GetBorderRadiusTopRight(GetBackDecoration()).GetX();
+        radiusBottomLeft = BoxComponentHelper::GetBorderRadiusBottomLeft(GetBackDecoration()).GetX();
+        radiusBottomRight = BoxComponentHelper::GetBorderRadiusBottomRight(GetBackDecoration()).GetX();
+        ParseJsonDimensionVp(args->GetValue("topLeft"), radiusTopLeft);
+        ParseJsonDimensionVp(args->GetValue("topRight"), radiusTopRight);
+        ParseJsonDimensionVp(args->GetValue("bottomLeft"), radiusBottomLeft);
+        ParseJsonDimensionVp(args->GetValue("bottomRight"), radiusBottomRight);
+    } else {
+        Dimension borderRadius;
+        if (!ParseJsonDimensionVp(args, borderRadius)) {
+            return;
+        }
+        radiusTopLeft = borderRadius;
+        radiusTopRight = borderRadius;
+        radiusBottomLeft = borderRadius;
+        radiusBottomRight = borderRadius;
+    }
+    auto stack = ViewStackProcessor::GetInstance();
+    AnimationOption option = stack->GetImplicitAnimationOption();
+    if (!stack->IsVisualStateSet()) {
+        BoxComponentHelper::SetBorderRadius(
+            GetBackDecoration(), radiusTopLeft, radiusTopRight, radiusBottomLeft, radiusBottomRight, option);
+    } else {
+        auto boxComponent = AceType::DynamicCast<BoxComponent>(stack->GetBoxComponent());
+        if (!boxComponent) {
+            LOGE("boxComponent is null");
+            return;
+        }
+        boxComponent->GetStateAttributes()->AddAttribute<AnimatableDimension>(
+            BoxStateAttribute::BORDER_RADIUS, AnimatableDimension(radiusTopLeft, option), stack->GetVisualState());
+        if (!boxComponent->GetStateAttributes()->HasAttribute(BoxStateAttribute::BORDER_RADIUS, VisualState::NORMAL)) {
+            boxComponent->GetStateAttributes()->AddAttribute<AnimatableDimension>(
+                BoxStateAttribute::BORDER_RADIUS, AnimatableDimension(radiusTopLeft, option), VisualState::NORMAL);
+        }
+    }
+}
+
+void JSViewAbstract::JsBorderStyle(const JSCallbackInfo& info)
+{
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::STRING, JSCallbackInfoType::NUMBER,
+        JSCallbackInfoType::OBJECT };
+    if (!CheckJSCallbackInfo("JsBorderStyle", info, checkList)) {
+        return;
+    }
+
+    auto argsPtrItem = JsonUtil::ParseJsonString(info[0]->ToString());
+    if (info[0]->IsObject()) {
+        argsPtrItem = JsonUtil::ParseJsonString(info[0]->ToString());
+        if (!argsPtrItem || argsPtrItem->IsNull()) {
+            LOGE("Js Parse object failed. argsPtr is null. %s", info[0]->ToString().c_str());
+            return;
+        }
+    } else {
+        argsPtrItem = JsonUtil::Create(true);
+        argsPtrItem->Put("left", info[0]->ToString().c_str());
+        argsPtrItem->Put("right", info[0]->ToString().c_str());
+        argsPtrItem->Put("top", info[0]->ToString().c_str());
+        argsPtrItem->Put("bottom", info[0]->ToString().c_str());
+    }
+    ParseBorderStyle(argsPtrItem);
+}
+
+void JSViewAbstract::ParseBorderStyle(std::unique_ptr<JsonValue>& args)
+{
+    BorderStyle styleLeft;
+    BorderStyle styleRight;
+    BorderStyle styleTop;
+    BorderStyle styleBottom;
+    if (args->Contains("left") || args->Contains("right") || args->Contains("top") || args->Contains("bottom")) {
+        styleLeft = static_cast<BorderStyle>(
+            args->GetInt("left", static_cast<int32_t>(BoxComponentHelper::GetBorderStyleLeft(GetBackDecoration()))));
+        styleRight = static_cast<BorderStyle>(
+            args->GetInt("right", static_cast<int32_t>(BoxComponentHelper::GetBorderStyleRight(GetBackDecoration()))));
+        styleTop = static_cast<BorderStyle>(
+            args->GetInt("top", static_cast<int32_t>(BoxComponentHelper::GetBorderStyleTop(GetBackDecoration()))));
+        styleBottom = static_cast<BorderStyle>(args->GetInt(
+            "bottom", static_cast<int32_t>(BoxComponentHelper::GetBorderStyleBottom(GetBackDecoration()))));
+    } else {
+        BorderStyle borderStyle;
+        if (!args->IsNumber()) {
+            return;
+        }
+        borderStyle = static_cast<BorderStyle>(args->GetInt());
+        styleLeft = borderStyle;
+        styleRight = borderStyle;
+        styleTop = borderStyle;
+        styleBottom = borderStyle;
+    }
+    auto stack = ViewStackProcessor::GetInstance();
+    AnimationOption option = stack->GetImplicitAnimationOption();
+    if (!stack->IsVisualStateSet()) {
+        BoxComponentHelper::SetBorderStyle(GetBackDecoration(), styleLeft, styleRight, styleTop, styleBottom);
+    } else {
+        auto boxComponent = AceType::DynamicCast<BoxComponent>(stack->GetBoxComponent());
+        if (!boxComponent) {
+            LOGE("boxComponent is null");
+            return;
+        }
+        boxComponent->GetStateAttributes()->AddAttribute<BorderStyle>(
+            BoxStateAttribute::BORDER_STYLE, styleLeft, stack->GetVisualState());
+        if (!boxComponent->GetStateAttributes()->HasAttribute(BoxStateAttribute::BORDER_STYLE, VisualState::NORMAL)) {
+            boxComponent->GetStateAttributes()->AddAttribute<BorderStyle>(BoxStateAttribute::BORDER_STYLE,
+                BoxComponentHelper::GetBorderStyle(GetBackDecoration()), VisualState::NORMAL);
        }
    }
 }
@@ -2075,7 +2219,7 @@ void JSViewAbstract::JsBackdropBlur(const JSCallbackInfo& info)

 void JSViewAbstract::JsWindowBlur(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("JsWindowBlur", info, checkList)) {
        return;
    }
@@ -2539,7 +2683,7 @@ bool JSViewAbstract::ParseJsStrArray(const JSRef<JSVal>& jsValue, std::vector<st

 std::pair<Dimension, Dimension> JSViewAbstract::ParseSize(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("ParseSize", info, checkList)) {
        return std::pair<Dimension, Dimension>();
    }
@@ -2614,7 +2758,7 @@ void JSViewAbstract::JsUseAlign(const JSCallbackInfo& info)

 void JSViewAbstract::JsGridSpan(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::NUMBER};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::NUMBER };
    if (!CheckJSCallbackInfo("JsGridSpan", info, checkList)) {
        return;
    }
@@ -2665,7 +2809,7 @@ static bool ParseSpanAndOffset(const JSRef<JSVal>& val, uint32_t& span, int32_t&

 void JSViewAbstract::JsUseSizeType(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("JsUseSizeType", info, checkList)) {
        return;
    }
@@ -2719,14 +2863,14 @@ void JSViewAbstract::Pop()

 void JSViewAbstract::JsOnDragStart(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::FUNCTION};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::FUNCTION };
    if (!CheckJSCallbackInfo("JsOnDragStart", info, checkList)) {
        return;
    }

    RefPtr<JsDragFunction> jsOnDragStartFunc = AceType::MakeRefPtr<JsDragFunction>(JSRef<JSFunc>::Cast(info[0]));
    auto onDragStartId = [execCtx = info.GetExecutionContext(), func = std::move(jsOnDragStartFunc)](
-                        const RefPtr<DragEvent>& info, const std::string &extraParams) -> DragItemInfo {
+                             const RefPtr<DragEvent>& info, const std::string& extraParams) -> DragItemInfo {
        DragItemInfo itemInfo;
        JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx, itemInfo);

@@ -2790,13 +2934,13 @@ RefPtr<Component> JSViewAbstract::ParseDragItemComponent(const JSRef<JSVal>& inf

 void JSViewAbstract::JsOnDragEnter(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::FUNCTION};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::FUNCTION };
    if (!CheckJSCallbackInfo("JsOnDragEnter", info, checkList)) {
        return;
    }
    RefPtr<JsDragFunction> jsOnDragEnterFunc = AceType::MakeRefPtr<JsDragFunction>(JSRef<JSFunc>::Cast(info[0]));
    auto onDragEnterId = [execCtx = info.GetExecutionContext(), func = std::move(jsOnDragEnterFunc)](
-                            const RefPtr<DragEvent>& info, const std::string &extraParams) {
+                             const RefPtr<DragEvent>& info, const std::string& extraParams) {
        JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx);
        ACE_SCORING_EVENT("onDragEnter");
        func->Execute(info, extraParams);
@@ -2807,13 +2951,13 @@ void JSViewAbstract::JsOnDragEnter(const JSCallbackInfo& info)

 void JSViewAbstract::JsOnDragMove(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::FUNCTION};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::FUNCTION };
    if (!CheckJSCallbackInfo("JsOnDragMove", info, checkList)) {
        return;
    }
    RefPtr<JsDragFunction> jsOnDragMoveFunc = AceType::MakeRefPtr<JsDragFunction>(JSRef<JSFunc>::Cast(info[0]));
    auto onDragMoveId = [execCtx = info.GetExecutionContext(), func = std::move(jsOnDragMoveFunc)](
-                            const RefPtr<DragEvent>& info, const std::string &extraParams) {
+                            const RefPtr<DragEvent>& info, const std::string& extraParams) {
        JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx);
        ACE_SCORING_EVENT("onDragMove");
        func->Execute(info, extraParams);
@@ -2824,13 +2968,13 @@ void JSViewAbstract::JsOnDragMove(const JSCallbackInfo& info)

 void JSViewAbstract::JsOnDragLeave(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::FUNCTION};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::FUNCTION };
    if (!CheckJSCallbackInfo("JsOnDragLeave", info, checkList)) {
        return;
    }
    RefPtr<JsDragFunction> jsOnDragLeaveFunc = AceType::MakeRefPtr<JsDragFunction>(JSRef<JSFunc>::Cast(info[0]));
    auto onDragLeaveId = [execCtx = info.GetExecutionContext(), func = std::move(jsOnDragLeaveFunc)](
-                            const RefPtr<DragEvent>& info, const std::string &extraParams) {
+                             const RefPtr<DragEvent>& info, const std::string& extraParams) {
        JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx);
        ACE_SCORING_EVENT("onDragLeave");
        func->Execute(info, extraParams);
@@ -2841,13 +2985,13 @@ void JSViewAbstract::JsOnDragLeave(const JSCallbackInfo& info)

 void JSViewAbstract::JsOnDrop(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::FUNCTION};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::FUNCTION };
    if (!CheckJSCallbackInfo("JsOnDrop", info, checkList)) {
        return;
    }
    RefPtr<JsDragFunction> jsOnDropFunc = AceType::MakeRefPtr<JsDragFunction>(JSRef<JSFunc>::Cast(info[0]));
    auto onDropId = [execCtx = info.GetExecutionContext(), func = std::move(jsOnDropFunc)](
-                        const RefPtr<DragEvent>& info, const std::string &extraParams) {
+                        const RefPtr<DragEvent>& info, const std::string& extraParams) {
        JAVASCRIPT_EXECUTION_SCOPE_WITH_CHECK(execCtx);
        ACE_SCORING_EVENT("onDrop");
        func->Execute(info, extraParams);
@@ -2858,7 +3002,7 @@ void JSViewAbstract::JsOnDrop(const JSCallbackInfo& info)

 void JSViewAbstract::JsOnAreaChange(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::FUNCTION};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::FUNCTION };
    if (!CheckJSCallbackInfo("JsOnAreaChange", info, checkList)) {
        return;
    }
@@ -3016,19 +3160,18 @@ void JSViewAbstract::JsLinearGradient(const JSCallbackInfo& info)
            LOGE("boxComponent is null");
            return;
        }
-        boxComponent->GetStateAttributes()->AddAttribute<Gradient>
-            (BoxStateAttribute::GRADIENT, lineGradient, stack->GetVisualState());
-        if (!boxComponent->GetStateAttributes()->
-            HasAttribute(BoxStateAttribute::GRADIENT, VisualState::NORMAL)) {
-            boxComponent->GetStateAttributes()->AddAttribute<Gradient>(BoxStateAttribute::GRADIENT,
-                GetBackDecoration()->GetGradient(), VisualState::NORMAL);
+        boxComponent->GetStateAttributes()->AddAttribute<Gradient>(
+            BoxStateAttribute::GRADIENT, lineGradient, stack->GetVisualState());
+        if (!boxComponent->GetStateAttributes()->HasAttribute(BoxStateAttribute::GRADIENT, VisualState::NORMAL)) {
+            boxComponent->GetStateAttributes()->AddAttribute<Gradient>(
+                BoxStateAttribute::GRADIENT, GetBackDecoration()->GetGradient(), VisualState::NORMAL);
        }
    }
 }

 void JSViewAbstract::JsRadialGradient(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("JsRadialGradient", info, checkList)) {
        return;
    }
@@ -3088,19 +3231,18 @@ void JSViewAbstract::JsRadialGradient(const JSCallbackInfo& info)
            LOGE("boxComponent is null");
            return;
        }
-        boxComponent->GetStateAttributes()->AddAttribute<Gradient>
-            (BoxStateAttribute::GRADIENT, radialGradient, stack->GetVisualState());
-        if (!boxComponent->GetStateAttributes()->
-            HasAttribute(BoxStateAttribute::GRADIENT, VisualState::NORMAL)) {
-            boxComponent->GetStateAttributes()->AddAttribute<Gradient>(BoxStateAttribute::GRADIENT,
-                GetBackDecoration()->GetGradient(), VisualState::NORMAL);
+        boxComponent->GetStateAttributes()->AddAttribute<Gradient>(
+            BoxStateAttribute::GRADIENT, radialGradient, stack->GetVisualState());
+        if (!boxComponent->GetStateAttributes()->HasAttribute(BoxStateAttribute::GRADIENT, VisualState::NORMAL)) {
+            boxComponent->GetStateAttributes()->AddAttribute<Gradient>(
+                BoxStateAttribute::GRADIENT, GetBackDecoration()->GetGradient(), VisualState::NORMAL);
        }
    }
 }

 void JSViewAbstract::JsSweepGradient(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("JsSweepGradient", info, checkList)) {
        return;
    }
@@ -3173,19 +3315,18 @@ void JSViewAbstract::JsSweepGradient(const JSCallbackInfo& info)
            LOGE("boxComponent is null");
            return;
        }
-        boxComponent->GetStateAttributes()->AddAttribute<Gradient>
-            (BoxStateAttribute::GRADIENT, sweepGradient, stack->GetVisualState());
-        if (!boxComponent->GetStateAttributes()->
-            HasAttribute(BoxStateAttribute::GRADIENT, VisualState::NORMAL)) {
-            boxComponent->GetStateAttributes()->AddAttribute<Gradient>(BoxStateAttribute::GRADIENT,
-                GetBackDecoration()->GetGradient(), VisualState::NORMAL);
+        boxComponent->GetStateAttributes()->AddAttribute<Gradient>(
+            BoxStateAttribute::GRADIENT, sweepGradient, stack->GetVisualState());
+        if (!boxComponent->GetStateAttributes()->HasAttribute(BoxStateAttribute::GRADIENT, VisualState::NORMAL)) {
+            boxComponent->GetStateAttributes()->AddAttribute<Gradient>(
+                BoxStateAttribute::GRADIENT, GetBackDecoration()->GetGradient(), VisualState::NORMAL);
        }
    }
 }

 void JSViewAbstract::JsMotionPath(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("JsMotionPath", info, checkList)) {
        return;
    }
@@ -3204,7 +3345,7 @@ void JSViewAbstract::JsMotionPath(const JSCallbackInfo& info)

 void JSViewAbstract::JsShadow(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::OBJECT};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::OBJECT };
    if (!CheckJSCallbackInfo("JsShadow", info, checkList)) {
        return;
    }
@@ -3445,8 +3586,10 @@ void JSViewAbstract::JsOnFocusMove(const JSCallbackInfo& args)
            ACE_SCORING_EVENT("onFocusMove");
            func->Execute(info);
        };
-        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent();
-        focusableComponent->SetOnFocusMove(onFocusMove);
+        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent(false);
+        if (focusableComponent) {
+            focusableComponent->SetOnFocusMove(onFocusMove);
+        }
    }
 }

@@ -3459,8 +3602,10 @@ void JSViewAbstract::JsOnFocus(const JSCallbackInfo& args)
            ACE_SCORING_EVENT("onFocus");
            func->Execute();
        };
-        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent();
-        focusableComponent->SetOnFocus(onFocus);
+        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent(false);
+        if (focusableComponent) {
+            focusableComponent->SetOnFocus(onFocus);
+        }
    }
 }

@@ -3473,8 +3618,10 @@ void JSViewAbstract::JsOnBlur(const JSCallbackInfo& args)
            ACE_SCORING_EVENT("onBlur");
            func->Execute();
        };
-        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent();
-        focusableComponent->SetOnBlur(onBlur_);
+        auto focusableComponent = ViewStackProcessor::GetInstance()->GetFocusableComponent(false);
+        if (focusableComponent) {
+            focusableComponent->SetOnBlur(onBlur_);
+        }
    }
 }

@@ -3502,7 +3649,7 @@ void JSViewAbstract::JsRestoreId(int32_t restoreId)
 #if defined(WINDOWS_PLATFORM) || defined(MAC_PLATFORM)
 void JSViewAbstract::JsDebugLine(const JSCallbackInfo& info)
 {
-    std::vector<JSCallbackInfoType> checkList {JSCallbackInfoType::STRING};
+    std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::STRING };
    if (!CheckJSCallbackInfo("JsDebugLine", info, checkList)) {
        return;
    }
@@ -3696,11 +3843,11 @@ void JSViewAbstract::JSBind()
    JSClass<JSViewAbstract>::StaticMethod("backgroundImage", &JSViewAbstract::JsBackgroundImage);
    JSClass<JSViewAbstract>::StaticMethod("backgroundImageSize", &JSViewAbstract::JsBackgroundImageSize);
    JSClass<JSViewAbstract>::StaticMethod("backgroundImagePosition", &JSViewAbstract::JsBackgroundImagePosition);
-    JSClass<JSViewAbstract>::StaticMethod("borderStyle", &JSViewAbstract::SetBorderStyle, opt);
-    JSClass<JSViewAbstract>::StaticMethod("borderColor", &JSViewAbstract::JsBorderColor);
    JSClass<JSViewAbstract>::StaticMethod("border", &JSViewAbstract::JsBorder);
    JSClass<JSViewAbstract>::StaticMethod("borderWidth", &JSViewAbstract::JsBorderWidth);
+    JSClass<JSViewAbstract>::StaticMethod("borderColor", &JSViewAbstract::JsBorderColor);
    JSClass<JSViewAbstract>::StaticMethod("borderRadius", &JSViewAbstract::JsBorderRadius);
+    JSClass<JSViewAbstract>::StaticMethod("borderStyle", &JSViewAbstract::JsBorderStyle);

    JSClass<JSViewAbstract>::StaticMethod("scale", &JSViewAbstract::JsScale);
    JSClass<JSViewAbstract>::StaticMethod("scaleX", &JSViewAbstract::JsScaleX);
@@ -3817,39 +3964,6 @@ void JSViewAbstract::SetBorderRadius(const Dimension& value, const AnimationOpti
    BoxComponentHelper::SetBorderRadius(GetBackDecoration(), value, option);
 }

-void JSViewAbstract::SetBorderStyle(int32_t style)
-{
-    BorderStyle borderStyle = BorderStyle::SOLID;
-
-    if (static_cast<int32_t>(BorderStyle::SOLID) == style) {
-        borderStyle = BorderStyle::SOLID;
-    } else if (static_cast<int32_t>(BorderStyle::DASHED) == style) {
-        borderStyle = BorderStyle::DASHED;
-    } else if (static_cast<int32_t>(BorderStyle::DOTTED) == style) {
-        borderStyle = BorderStyle::DOTTED;
-    } else {
-        borderStyle = BorderStyle::NONE;
-    }
-
-    auto stack = ViewStackProcessor::GetInstance();
-    if (!stack->IsVisualStateSet()) {
-        BoxComponentHelper::SetBorderStyle(GetBackDecoration(), borderStyle);
-    } else {
-        auto boxComponent = AceType::DynamicCast<BoxComponent>(stack->GetBoxComponent());
-        if (!boxComponent) {
-            LOGE("boxComponent is null");
-            return;
-        }
-        boxComponent->GetStateAttributes()->AddAttribute<BorderStyle>
-            (BoxStateAttribute::BORDER_STYLE, borderStyle, stack->GetVisualState());
-        if (!boxComponent->GetStateAttributes()->
-            HasAttribute(BoxStateAttribute::BORDER_STYLE, VisualState::NORMAL)) {
-            boxComponent->GetStateAttributes()->AddAttribute<BorderStyle>(BoxStateAttribute::BORDER_STYLE,
-                BoxComponentHelper::GetBorderStyle(GetBackDecoration()), VisualState::NORMAL);
-        }
-    }
-}
-
 void JSViewAbstract::SetMarginTop(const JSCallbackInfo& info)
 {
    if (info.Length() < 1) {
@@ -100,12 +100,17 @@ public:
    static void JsBindMenu(const JSCallbackInfo& info);
    static void JsBindContextMenu(const JSCallbackInfo& info);
    static void JsBorderColor(const JSCallbackInfo& info);
+    static void ParseBorderColor(std::unique_ptr<JsonValue>& args);
    static void JsPadding(const JSCallbackInfo& info);
    static void JsMargin(const JSCallbackInfo& info);
    static void ParseMarginOrPadding(const JSCallbackInfo& info, bool isMargin);
    static void JsBorder(const JSCallbackInfo& info);
    static void JsBorderWidth(const JSCallbackInfo& info);
+    static void ParseBorderWidth(std::unique_ptr<JsonValue>& args);
    static void JsBorderRadius(const JSCallbackInfo& info);
+    static void ParseBorderRadius(std::unique_ptr<JsonValue>& args);
+    static void JsBorderStyle(const JSCallbackInfo& info);
+    static void ParseBorderStyle(std::unique_ptr<JsonValue>& args);
    static void JsBlur(const JSCallbackInfo& info);
    static void JsColorBlend(const JSCallbackInfo& info);
    static void JsBackdropBlur(const JSCallbackInfo& info);
@@ -26,21 +26,27 @@ namespace OHOS::Ace {
 class BoxComponentHelper {
 public:
    static void SetBorderColor(
-        const RefPtr<Decoration> decoration, const Color& color,
-        const AnimationOption& option = AnimationOption())
+        const RefPtr<Decoration> decoration, const Color& color, const AnimationOption& option = AnimationOption())
    {
        if (!decoration) {
            return;
        }
        Border border = decoration->GetBorder();
-        BorderEdge edge;
-        edge = border.Left();
-        edge.SetColor(color, option);
+        border.SetColor(color);
+        decoration->SetBorder(border);
+    }

-        border.SetLeftEdge(edge);
-        border.SetRightEdge(edge);
-        border.SetTopEdge(edge);
-        border.SetBottomEdge(edge);
+    static void SetBorderColor(const RefPtr<Decoration> decoration, const Color& colorLeft, const Color& colorRight,
+        const Color& colorTop, const Color& colorBottom, const AnimationOption& option = AnimationOption())
+    {
+        if (!decoration) {
+            return;
+        }
+        Border border = decoration->GetBorder();
+        border.SetLeftColor(colorLeft, option);
+        border.SetRightColor(colorRight, option);
+        border.SetTopColor(colorTop, option);
+        border.SetBottomColor(colorBottom, option);
        decoration->SetBorder(border);
    }

@@ -52,8 +58,40 @@ public:
        return decoration->GetBorder().Left().GetColor();
    }

-    static void SetBorderRadius(const RefPtr<Decoration> decoration, const Dimension& radius,
-        const AnimationOption& option = AnimationOption())
+    static Color GetBorderColorLeft(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return Color();
+        }
+        return decoration->GetBorder().Left().GetColor();
+    }
+
+    static Color GetBorderColorRight(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return Color();
+        }
+        return decoration->GetBorder().Right().GetColor();
+    }
+
+    static Color GetBorderColorTop(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return Color();
+        }
+        return decoration->GetBorder().Top().GetColor();
+    }
+
+    static Color GetBorderColorBottom(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return Color();
+        }
+        return decoration->GetBorder().Bottom().GetColor();
+    }
+
+    static void SetBorderRadius(
+        const RefPtr<Decoration> decoration, const Dimension& radius, const AnimationOption& option = AnimationOption())
    {
        if (!decoration) {
            return;
@@ -63,6 +101,21 @@ public:
        decoration->SetBorder(border);
    }

+    static void SetBorderRadius(const RefPtr<Decoration> decoration, const Dimension& radiusTopLeft,
+        const Dimension& radiusTopRight, const Dimension& radiusBottomLeft, const Dimension& radiusBottomRight,
+        const AnimationOption& option = AnimationOption())
+    {
+        if (!decoration) {
+            return;
+        }
+        Border border = decoration->GetBorder();
+        border.SetTopLeftRadius(Radius(AnimatableDimension(radiusTopLeft, option)));
+        border.SetTopRightRadius(Radius(AnimatableDimension(radiusTopRight, option)));
+        border.SetBottomLeftRadius(Radius(AnimatableDimension(radiusBottomLeft, option)));
+        border.SetBottomRightRadius(Radius(AnimatableDimension(radiusBottomRight, option)));
+        decoration->SetBorder(border);
+    }
+
    static Radius GetBorderRadius(const RefPtr<Decoration> decoration)
    {
        if (decoration == nullptr) {
@@ -75,20 +128,75 @@ public:
        return border.TopLeftRadius();
    }

+    static Radius GetBorderRadiusTopLeft(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return Radius(0.0);
+        }
+        Border border = decoration->GetBorder();
+        if (!border.HasRadius()) {
+            return Radius(0.0);
+        }
+        return border.TopLeftRadius();
+    }
+
+    static Radius GetBorderRadiusTopRight(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return Radius(0.0);
+        }
+        Border border = decoration->GetBorder();
+        if (!border.HasRadius()) {
+            return Radius(0.0);
+        }
+        return border.TopRightRadius();
+    }
+
+    static Radius GetBorderRadiusBottomLeft(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return Radius(0.0);
+        }
+        Border border = decoration->GetBorder();
+        if (!border.HasRadius()) {
+            return Radius(0.0);
+        }
+        return border.BottomLeftRadius();
+    }
+
+    static Radius GetBorderRadiusBottomRight(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return Radius(0.0);
+        }
+        Border border = decoration->GetBorder();
+        if (!border.HasRadius()) {
+            return Radius(0.0);
+        }
+        return border.BottomRightRadius();
+    }
+
    static void SetBorderStyle(const RefPtr<Decoration> decoration, const BorderStyle& style)
    {
        if (!decoration) {
            return;
        }
        Border border = decoration->GetBorder();
-        auto edge = border.Left();
-
-        edge.SetStyle(style);
-        border.SetLeftEdge(edge);
-        border.SetRightEdge(edge);
-        border.SetTopEdge(edge);
-        border.SetBottomEdge(edge);
+        border.SetStyle(style);
+        decoration->SetBorder(border);
+    }

+    static void SetBorderStyle(const RefPtr<Decoration> decoration, const BorderStyle& styleLeft,
+        const BorderStyle& styleRight, const BorderStyle& styleTop, const BorderStyle& styleBottom)
+    {
+        if (!decoration) {
+            return;
+        }
+        Border border = decoration->GetBorder();
+        border.SetLeftStyle(styleLeft);
+        border.SetRightStyle(styleRight);
+        border.SetTopStyle(styleTop);
+        border.SetBottomStyle(styleBottom);
        decoration->SetBorder(border);
    }

@@ -101,9 +209,44 @@ public:
        return border.Left().GetBorderStyle();
    }

+    static BorderStyle GetBorderStyleLeft(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return BorderStyle::NONE;
+        }
+        Border border = decoration->GetBorder();
+        return border.Left().GetBorderStyle();
+    }
+
+    static BorderStyle GetBorderStyleRight(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return BorderStyle::NONE;
+        }
+        Border border = decoration->GetBorder();
+        return border.Right().GetBorderStyle();
+    }
+
+    static BorderStyle GetBorderStyleTop(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return BorderStyle::NONE;
+        }
+        Border border = decoration->GetBorder();
+        return border.Top().GetBorderStyle();
+    }
+
+    static BorderStyle GetBorderStyleBottom(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return BorderStyle::NONE;
+        }
+        Border border = decoration->GetBorder();
+        return border.Bottom().GetBorderStyle();
+    }
+
    static void SetBorderWidth(
-        const RefPtr<Decoration> decoration, const Dimension& width,
-        const AnimationOption& option = AnimationOption())
+        const RefPtr<Decoration> decoration, const Dimension& width, const AnimationOption& option = AnimationOption())
    {
        if (!decoration) {
            return;
@@ -113,6 +256,20 @@ public:
        decoration->SetBorder(border);
    }

+    static void SetBorderWidth(const RefPtr<Decoration> decoration, const Dimension& left, const Dimension& right,
+        const Dimension& top, const Dimension& bottom, const AnimationOption& option = AnimationOption())
+    {
+        if (!decoration) {
+            return;
+        }
+        Border border = decoration->GetBorder();
+        border.SetLeftWidth(left, option);
+        border.SetRightWidth(right, option);
+        border.SetTopWidth(top, option);
+        border.SetBottomWidth(bottom, option);
+        decoration->SetBorder(border);
+    }
+
    static Dimension GetBorderWidth(const RefPtr<Decoration> decoration)
    {
        if (decoration == nullptr) {
@@ -120,6 +277,38 @@ public:
        }
        return decoration->GetBorder().Left().GetWidth();
    }
+
+    static Dimension GetBorderLeftWidth(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return Dimension(0);
+        }
+        return decoration->GetBorder().Left().GetWidth();
+    }
+
+    static Dimension GetBorderRightWidth(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return Dimension(0);
+        }
+        return decoration->GetBorder().Right().GetWidth();
+    }
+
+    static Dimension GetBorderTopWidth(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return Dimension(0);
+        }
+        return decoration->GetBorder().Top().GetWidth();
+    }
+
+    static Dimension GetBorderBottomWidth(const RefPtr<Decoration> decoration)
+    {
+        if (decoration == nullptr) {
+            return Dimension(0);
+        }
+        return decoration->GetBorder().Bottom().GetWidth();
+    }
 };

 } // namespace OHOS::Ace
@@ -819,7 +819,7 @@ bool RenderTextField::RequestKeyboard(bool isFocusViewChanged, bool needStartTwi
    instanceId_ = ContainerScope::CurrentId();

    if (softKeyboardEnabled_) {
-        LOGI("RenderTextField::CloseKeyboard: Request open soft keyboard");
+        LOGI("Request open soft keyboard");
 #if defined(ENABLE_STANDARD_INPUT)
        if (textChangeListener_ == nullptr) {
            textChangeListener_ = new OnTextChangedListenerImpl(WeakClaim(this));
@@ -863,7 +863,7 @@ bool RenderTextField::CloseKeyboard(bool forceClose)
            StopTwinkling();
        }
        if (HasConnection()) {
-            LOGI("RenderTextField::CloseKeyboard: Request close soft keyboard");
+            LOGI("Request close soft keyboard");
 #if defined(ENABLE_STANDARD_INPUT)
            MiscServices::InputMethodController::GetInstance()->HideTextInput();
 #else
@@ -242,6 +242,7 @@ bool TextFieldElement::RequestKeyboard(bool needStartTwinkling)
        }
        return true;
    } else {
+        LOGW("Request keyboard failed because the textfield is unfocusable");
        isRequestFocus_ = false;
        return false;
    }