diff --git a/ui/src/ui/views/config.browser.test.ts b/ui/src/ui/views/config.browser.test.ts
index 6473c09404d..ebde01da266 100644
--- a/ui/src/ui/views/config.browser.test.ts
+++ b/ui/src/ui/views/config.browser.test.ts
@@ -46,6 +46,8 @@ describe("config view", () => {
     setBorderRadius: vi.fn(),
     gatewayUrl: "",
     assistantName: "OpenClaw",
+    borderRadius: 8,
+    setBorderRadius: vi.fn(),
   });
 
   function findActionButtons(container: HTMLElement): {
diff --git a/ui/src/ui/views/config.ts b/ui/src/ui/views/config.ts
index 7c1121e6bb8..f2e32beddec 100644
--- a/ui/src/ui/views/config.ts
+++ b/ui/src/ui/views/config.ts
@@ -49,8 +49,8 @@ export type ConfigProps = {
   themeMode: ThemeMode;
   setTheme: (theme: ThemeName, context?: ThemeTransitionContext) => void;
   setThemeMode: (mode: ThemeMode, context?: ThemeTransitionContext) => void;
-  borderRadius: number;
-  setBorderRadius: (value: number) => void;
+  borderRadius?: number;
+  setBorderRadius?: (value: number) => void;
   gatewayUrl: string;
   assistantName: string;
   configPath?: string | null;
@@ -517,6 +517,8 @@ const THEME_OPTIONS: ThemeOption[] = [
 ];
 
 function renderAppearanceSection(props: ConfigProps) {
+  const borderRadius = props.borderRadius ?? 8;
+  const setBorderRadius = props.setBorderRadius ?? (() => {});
   return html`
     <div class="settings-appearance">
       <div class="settings-appearance__section">
@@ -559,7 +561,7 @@ function renderAppearanceSection(props: ConfigProps) {
               <span class="settings-slider__key-swatch settings-slider__key-swatch--sharp"></span>
               Square
             </span>
-            <span class="settings-slider__value">${props.borderRadius}%</span>
+            <span class="settings-slider__value">${borderRadius}%</span>
             <span class="settings-slider__label">
               Round
               <span class="settings-slider__key-swatch settings-slider__key-swatch--round"></span>
@@ -571,24 +573,24 @@ function renderAppearanceSection(props: ConfigProps) {
             min="0"
             max="100"
             step="1"
-            .value=${String(props.borderRadius)}
+            .value=${String(borderRadius)}
             @input=${(e: Event) => {
               const v = Number((e.target as HTMLInputElement).value);
-              props.setBorderRadius(v);
+              setBorderRadius(v);
             }}
           />
           <div class="settings-slider__preview">
             <div
               class="settings-slider__preview-swatch"
-              style="border-radius: ${Math.round(10 * (props.borderRadius / 50))}px"
+              style="border-radius: ${Math.round(10 * (borderRadius / 50))}px"
             ></div>
             <div
               class="settings-slider__preview-swatch"
-              style="border-radius: ${Math.round(14 * (props.borderRadius / 50))}px"
+              style="border-radius: ${Math.round(14 * (borderRadius / 50))}px"
             ></div>
             <div
               class="settings-slider__preview-swatch"
-              style="border-radius: ${Math.round(20 * (props.borderRadius / 50))}px"
+              style="border-radius: ${Math.round(20 * (borderRadius / 50))}px"
             ></div>
           </div>
         </div>