diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx
index 95434213e..f2e128109 100644
--- a/apps/docs/docs/management/boards/index.mdx
+++ b/apps/docs/docs/management/boards/index.mdx
@@ -79,6 +79,9 @@ familiar Boards thumbnail, with the board's actual grid proportions and rails al
 The indicated screen width represents the selected layout. The miniature stays contained, centres fixed grids that
 fit, and scrolls when needed. Changes to sizing and appearance appear immediately, before saving.
 
+Choose **Item radius** using the same visual corner-style picker as server branding. Selecting a card updates the
+board preview immediately; save the board settings to apply it.
+
 In fixed mode, browser `Cmd`/`Ctrl` + `+` or `-` zoom works naturally: a 200 × 200 CSS-pixel tile keeps those dimensions
 while its physical screen size changes with zoom. Homarr does not shrink the tile to cancel the browser's zoom.
 Your live board can still select a different saved layout when its viewport crosses a breakpoint. Nested Containers
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx
index d8de8ff97..a1694301c 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx
@@ -9,7 +9,6 @@ import {
   Group,
   InputWrapper,
   isLightColor,
-  Select,
   Slider,
   Stack,
   Text,
@@ -20,7 +19,7 @@ import { IconX } from "@tabler/icons-react";
 
 import type { UseFormReturnType } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
-import { BoardColorInput } from "@homarr/ui";
+import { BoardColorInput, CornerStylePicker, cornerStyleValues } from "@homarr/ui";
 import { useSettings } from "@homarr/settings";
 
 import { SectionCard } from "~/components/manage/section-card";
@@ -123,18 +122,18 @@ export const ColorSettingsContent = ({ form }: Props) => {
             </Button>
           </Group>
         </Grid.Col>
-        <Grid.Col span={{ sm: 12, md: 6 }}>
-          <Select
+        <Grid.Col span={12}>
+          <CornerStylePicker
+            compact
             label={tBoard("field.itemRadius.label")}
             description={tBoard("field.itemRadius.description")}
-            data={[
-              { label: tBoard("field.itemRadius.option.xs"), value: "xs" },
-              { label: tBoard("field.itemRadius.option.sm"), value: "sm" },
-              { label: tBoard("field.itemRadius.option.md"), value: "md" },
-              { label: tBoard("field.itemRadius.option.lg"), value: "lg" },
-              { label: tBoard("field.itemRadius.option.xl"), value: "xl" },
-            ]}
-            {...form.getInputProps("itemRadius")}
+            value={form.values.itemRadius}
+            labels={
+              Object.fromEntries(
+                cornerStyleValues.map((cornerStyle) => [cornerStyle, tBoard(`field.itemRadius.option.${cornerStyle}`)]),
+              ) as Record<(typeof cornerStyleValues)[number], string>
+            }
+            onChange={(cornerStyle) => form.setFieldValue("itemRadius", cornerStyle)}
           />
         </Grid.Col>
       </Grid>