feat(rounded): accept arbitrary values (#22721)

J-Sek · web-flow · commit bd9037cef06a · 2026-03-25T01:25:51.000+01:00
resolves #14368
diff --git a/packages/api-generator/src/locale/en/rounded.json b/packages/api-generator/src/locale/en/rounded.json
@@ -1,6 +1,6 @@
 {
   "props": {
-    "rounded": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).",
+    "rounded": "Designates the **border-radius** applied to the component. You can use the predefined sizes **0**, **xs**, **sm**, **md**, **lg**, **xl**, **pill**, **circle**, and **shaped**, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).",
     "tile": "Removes any applied **border-radius** from the component."
   }
 }
diff --git a/packages/docs/src/pages/en/styles/border-radius.md b/packages/docs/src/pages/en/styles/border-radius.md
@@ -1,4 +1,5 @@
 ---
+emphasized: true
 meta:
   title: Border radius
   description: Use border utilities to quickly style the border-radius of any element.
@@ -149,6 +150,18 @@ Setting the **rounded** property applies a component specific border-radius clas
 
 <ExamplesExample file="border-radius/misc-components" />
 
+## Arbitrary border radius
+
+<DocIntroduced version="4.1.0" />
+
+In addition to the named sizes, the **rounded** prop accepts any valid CSS value or a plain number (converted to `px`):
+
+```html
+<v-sheet rounded="8" />       <!-- border-radius: 8px -->
+<v-sheet rounded="1.5rem" />  <!-- border-radius: 1.5rem -->
+<v-sheet rounded="50%" />     <!-- border-radius: 50% -->
+```
+
 ## SASS variables
 
 You can also use the following SASS variables to customize the border radius:
diff --git a/packages/vuetify/src/components/VAlert/VAlert.tsx b/packages/vuetify/src/components/VAlert/VAlert.tsx
@@ -125,7 +125,7 @@ export const VAlert = genericComponent<VAlertSlots>()({
     const { elevationClasses } = useElevation(props)
     const { locationStyles } = useLocation(props)
     const { positionClasses } = usePosition(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
     const { textColorClasses, textColorStyles } = useTextColor(() => props.borderColor)
     const { t } = useLocale()
 
@@ -175,6 +175,7 @@ export const VAlert = genericComponent<VAlertSlots>()({
             colorStyles.value,
             dimensionStyles.value,
             locationStyles.value,
+            roundedStyles.value,
             props.style,
           ]}
           role="alert"
diff --git a/packages/vuetify/src/components/VAvatar/VAvatar.tsx b/packages/vuetify/src/components/VAvatar/VAvatar.tsx
@@ -61,7 +61,7 @@ export const VAvatar = genericComponent<VAvatarSlots>()({
     const { borderClasses } = useBorder(props)
     const { colorClasses, colorStyles, variantClasses } = useVariant(props)
     const { densityClasses } = useDensity(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
     const { sizeClasses, sizeStyles } = useSize(props)
 
     const badgeDotSize = computed(() => {
@@ -112,6 +112,7 @@ export const VAvatar = genericComponent<VAvatarSlots>()({
           style={[
             colorStyles.value,
             sizeStyles.value,
+            roundedStyles.value,
             props.style,
           ]}
         >
diff --git a/packages/vuetify/src/components/VBadge/VBadge.tsx b/packages/vuetify/src/components/VBadge/VBadge.tsx
@@ -64,7 +64,7 @@ export const VBadge = genericComponent<VBadgeSlots>()({
 
   setup (props, ctx) {
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
     const { t } = useLocale()
     const { textColorClasses, textColorStyles } = useTextColor(() => props.textColor)
     const { themeClasses } = useTheme()
@@ -134,6 +134,7 @@ export const VBadge = genericComponent<VBadgeSlots>()({
                     width: convertToUnit(props.dotSize),
                     height: convertToUnit(props.dotSize),
                   } : {},
+                  roundedStyles.value,
                 ]}
                 aria-atomic="true"
                 aria-label={ t(props.label, value) }
diff --git a/packages/vuetify/src/components/VBanner/VBanner.tsx b/packages/vuetify/src/components/VBanner/VBanner.tsx
@@ -74,7 +74,7 @@ export const VBanner = genericComponent<VBannerSlots>()({
     const { elevationClasses } = useElevation(props)
     const { locationStyles } = useLocation(props)
     const { positionClasses } = usePosition(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
 
     const { themeClasses } = provideTheme(props)
 
@@ -111,6 +111,7 @@ export const VBanner = genericComponent<VBannerSlots>()({
             backgroundColorStyles.value,
             dimensionStyles.value,
             locationStyles.value,
+            roundedStyles.value,
             props.style,
           ]}
           role="banner"
diff --git a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx
@@ -77,7 +77,7 @@ export const VBottomNavigation = genericComponent<new <T>(
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.bgColor)
     const { densityClasses } = useDensity(props)
     const { elevationClasses } = useElevation(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
     const { ssrBootStyles } = useSsrBoot()
     const height = computed(() => (
       Number(props.height) -
@@ -132,6 +132,7 @@ export const VBottomNavigation = genericComponent<new <T>(
               height: convertToUnit(height.value),
             },
             ssrBootStyles.value,
+            roundedStyles.value,
             props.style,
           ]}
         >
diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx
@@ -73,7 +73,7 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
   setup (props, { slots }) {
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.bgColor)
     const { densityClasses } = useDensity(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
 
     provideDefaults({
       VBreadcrumbsDivider: {
@@ -105,6 +105,7 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
           ]}
           style={[
             backgroundColorStyles.value,
+            roundedStyles.value,
             props.style,
           ]}
         >
diff --git a/packages/vuetify/src/components/VBtn/VBtn.tsx b/packages/vuetify/src/components/VBtn/VBtn.tsx
@@ -111,7 +111,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
     const { loaderClasses } = useLoader(props)
     const { locationStyles } = useLocation(props)
     const { positionClasses } = usePosition(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
     const { sizeClasses, sizeStyles } = useSize(props)
     const group = useGroupItem(props, props.symbol, false)
     const link = useLink(props, attrs)
@@ -223,6 +223,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
             dimensionStyles.value,
             locationStyles.value,
             sizeStyles.value,
+            roundedStyles.value,
             props.style,
           ]}
           aria-busy={ props.loading ? true : undefined }
diff --git a/packages/vuetify/src/components/VBtnGroup/VBtnGroup.tsx b/packages/vuetify/src/components/VBtnGroup/VBtnGroup.tsx
@@ -47,7 +47,7 @@ export const VBtnGroup = genericComponent()({
     const { densityClasses } = useDensity(props)
     const { borderClasses } = useBorder(props)
     const { elevationClasses } = useElevation(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
 
     provideDefaults({
       VBtn: {
@@ -76,7 +76,7 @@ export const VBtnGroup = genericComponent()({
             roundedClasses.value,
             props.class,
           ]}
-          style={ props.style }
+          style={[roundedStyles.value, props.style]}
           v-slots={ slots }
         />
       )
diff --git a/packages/vuetify/src/components/VCard/VCard.tsx b/packages/vuetify/src/components/VCard/VCard.tsx
@@ -110,7 +110,7 @@ export const VCard = genericComponent<VCardSlots>()({
     const { loaderClasses } = useLoader(props)
     const { locationStyles } = useLocation(props)
     const { positionClasses } = usePosition(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
     const link = useLink(props, attrs)
     const loadingColor = shallowRef<string | undefined>(undefined)
 
@@ -168,6 +168,7 @@ export const VCard = genericComponent<VCardSlots>()({
             {
               '--v-card-height': convertToUnit(props.height),
             },
+            roundedStyles.value,
             props.style,
           ]}
           onClick={ isClickable && link.navigate.value }
diff --git a/packages/vuetify/src/components/VChip/VChip.tsx b/packages/vuetify/src/components/VChip/VChip.tsx
@@ -129,7 +129,7 @@ export const VChip = genericComponent<VChipSlots>()({
     const { borderClasses } = useBorder(props)
     const { densityClasses } = useDensity(props)
     const { elevationClasses } = useElevation(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
     const { sizeClasses } = useSize(props)
     const { themeClasses } = provideTheme(props)
 
@@ -227,6 +227,7 @@ export const VChip = genericComponent<VChipSlots>()({
           ]}
           style={[
             colorStyles.value,
+            roundedStyles.value,
             props.style,
           ]}
           disabled={ props.disabled || undefined }
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx
@@ -47,7 +47,7 @@ export const VExpansionPanel = genericComponent<VExpansionPanelSlots>()({
     const groupItem = useGroupItem(props, VExpansionPanelSymbol)
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.bgColor)
     const { elevationClasses } = useElevation(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
     const isDisabled = toRef(() => groupItem?.disabled.value || props.disabled)
 
     const selectedIndices = computed(() => groupItem.group.items.value.reduce<number[]>((arr, item, index) => {
@@ -92,6 +92,7 @@ export const VExpansionPanel = genericComponent<VExpansionPanelSlots>()({
           ]}
           style={[
             backgroundColorStyles.value,
+            roundedStyles.value,
             props.style,
           ]}
         >
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx
@@ -82,7 +82,7 @@ export const VExpansionPanels = genericComponent<new <TModel>(
     const { next, prev } = useGroup(props, VExpansionPanelSymbol)
 
     const { themeClasses } = provideTheme(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
 
     const variantClass = toRef(() => props.variant && `v-expansion-panels--variant-${props.variant}`)
 
@@ -115,7 +115,10 @@ export const VExpansionPanels = genericComponent<new <TModel>(
           variantClass.value,
           props.class,
         ]}
-        style={ props.style }
+        style={[
+          roundedStyles.value,
+          props.style,
+        ]}
       >
         { slots.default?.({ prev, next }) }
       </props.tag>
diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
@@ -139,7 +139,7 @@ export const VField = genericComponent<new <T>(
     const { loaderClasses } = useLoader(props)
     const { focusClasses, isFocused, focus, blur } = useFocus(props)
     const { InputIcon } = useInputIcon(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
     const { rtlClasses } = useRtl()
 
     const isActive = toRef(() => props.dirty || props.active)
@@ -287,6 +287,7 @@ export const VField = genericComponent<new <T>(
           ]}
           style={[
             backgroundColorStyles.value,
+            roundedStyles.value,
             props.style,
           ]}
           onClick={ onClick }
diff --git a/packages/vuetify/src/components/VFooter/VFooter.tsx b/packages/vuetify/src/components/VFooter/VFooter.tsx
@@ -46,7 +46,7 @@ export const VFooter = genericComponent()({
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color)
     const { borderClasses } = useBorder(props)
     const { elevationClasses } = useElevation(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
 
     const autoHeight = shallowRef(32)
     const { resizeRef } = useResizeObserver(entries => {
@@ -88,6 +88,7 @@ export const VFooter = genericComponent()({
           props.app ? layoutItemStyles.value : {
             height: convertToUnit(props.height),
           },
+          roundedStyles.value,
           props.style,
         ]}
         v-slots={ slots }
diff --git a/packages/vuetify/src/components/VHotkey/VHotkey.tsx b/packages/vuetify/src/components/VHotkey/VHotkey.tsx
@@ -234,7 +234,7 @@ export const VHotkey = genericComponent()({
     const { themeClasses } = provideTheme(props)
     const { rtlClasses } = useRtl()
     const { borderClasses } = useBorder(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
     const { elevationClasses } = useElevation(props)
 
     const { colorClasses, colorStyles, variantClasses } = useVariant(() => ({
@@ -345,7 +345,7 @@ export const VHotkey = genericComponent()({
         <KeyComponent
           key={ keyIndex }
           class={ keyClasses }
-          style={ isContained ? undefined : colorStyles.value }
+          style={ isContained ? undefined : [colorStyles.value, roundedStyles.value] }
           aria-hidden="true"
           title={ getKeyTooltip(key) }
         >
@@ -429,7 +429,7 @@ export const VHotkey = genericComponent()({
                 elevationClasses.value,
                 colorClasses.value,
               ]}
-              style={ colorStyles.value }
+              style={[colorStyles.value, roundedStyles.value]}
               aria-hidden="true"
             >
               { content }
diff --git a/packages/vuetify/src/components/VImg/VImg.tsx b/packages/vuetify/src/components/VImg/VImg.tsx
@@ -119,7 +119,7 @@ export const VImg = genericComponent<VImgSlots>()({
 
   setup (props, { attrs, emit, slots }) {
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
     const vm = getCurrentInstance('VImg')
 
     const currentSrc = shallowRef('') // Set from srcset
@@ -370,6 +370,7 @@ export const VImg = genericComponent<VImgSlots>()({
           style={[
             { width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width) },
             backgroundColorStyles.value,
+            roundedStyles.value,
             props.style,
           ]}
           { ...responsiveProps }
diff --git a/packages/vuetify/src/components/VKbd/VKbd.tsx b/packages/vuetify/src/components/VKbd/VKbd.tsx
@@ -32,7 +32,7 @@ export const VKbd = genericComponent()({
   setup (props, { slots }) {
     const { themeClasses } = provideTheme(props)
     const { borderClasses } = useBorder(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color)
     const { elevationClasses } = useElevation(props)
 
@@ -49,6 +49,7 @@ export const VKbd = genericComponent()({
         ]}
         style={[
           backgroundColorStyles.value,
+          roundedStyles.value,
           props.style,
         ]}
         v-slots={ slots }
diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
@@ -176,7 +176,7 @@ export const VList = genericComponent<new <S, A, O, T extends readonly any[]>(
     const { densityClasses } = useDensity(props)
     const { dimensionStyles } = useDimension(props)
     const { elevationClasses } = useElevation(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
 
     const { children, open, parents, select, getPath } = useNested(props, {
       items,
@@ -378,6 +378,7 @@ export const VList = genericComponent<new <S, A, O, T extends readonly any[]>(
             },
             backgroundColorStyles.value,
             dimensionStyles.value,
+            roundedStyles.value,
             props.style,
           ]}
           tabindex={ props.disabled ? -1 : 0 }
diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -211,7 +211,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
     const { densityClasses } = useDensity(props)
     const { dimensionStyles } = useDimension(props)
     const { elevationClasses } = useElevation(props)
-    const { roundedClasses } = useRounded(roundedProps)
+    const { roundedClasses, roundedStyles } = useRounded(roundedProps)
     const lineClasses = toRef(() => props.lines ? `v-list-item--${props.lines}-line` : undefined)
     const rippleOptions = toRef(() =>
       (
@@ -311,6 +311,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
             },
             colorStyles.value,
             dimensionStyles.value,
+            roundedStyles.value,
             props.style,
           ]}
           tabindex={ props.tabindex ?? (isClickable.value ? (list ? -2 : 0) : undefined) }
diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
@@ -114,7 +114,7 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color)
     const { elevationClasses } = useElevation(props)
     const { displayClasses, mobile } = useDisplay(props)
-    const { roundedClasses } = useRounded(props)
+    const { roundedClasses, roundedStyles } = useRounded(props)
     const router = useRouter()
     const isActive = useProxiedModel(props, 'modelValue', null, v => !!v)
     const { ssrBootStyles } = useSsrBoot()
@@ -249,6 +249,7 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
               layoutItemStyles.value,
               ssrBootStyles.value,
               stickyStyles.value,
+              roundedStyles.value,
               props.style,
             ]}
             inert={ !isActive.value }
diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx
diff --git a/packages/vuetify/src/components/VSheet/VSheet.tsx b/packages/vuetify/src/components/VSheet/VSheet.tsx
diff --git a/packages/vuetify/src/components/VSlider/VSliderTrack.tsx b/packages/vuetify/src/components/VSlider/VSliderTrack.tsx
diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
diff --git a/packages/vuetify/src/components/VSystemBar/VSystemBar.tsx b/packages/vuetify/src/components/VSystemBar/VSystemBar.tsx
diff --git a/packages/vuetify/src/components/VTimeline/VTimelineDivider.tsx b/packages/vuetify/src/components/VTimeline/VTimelineDivider.tsx
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.tsx b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
diff --git a/packages/vuetify/src/composables/__tests__/rounded.spec.ts b/packages/vuetify/src/composables/__tests__/rounded.spec.ts
diff --git a/packages/vuetify/src/composables/rounded.ts b/packages/vuetify/src/composables/rounded.ts
diff --git a/packages/vuetify/src/labs/VIconBtn/VIconBtn.tsx b/packages/vuetify/src/labs/VIconBtn/VIconBtn.tsx
diff --git a/packages/vuetify/src/labs/VVideo/VVideo.tsx b/packages/vuetify/src/labs/VVideo/VVideo.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"props": {`
`3`		`- "rounded": "Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).",`
	`3`	+ "rounded": "Designates the border-radius applied to the component. You can use the predefined sizes 0, xs, sm, md, lg, xl, pill, circle, and shaped, pass `true` for the component default. Since v4.1 you can also provide any valid CSS value (e.g. `8px`, `50%`, `1em`) or number (converted to `px`). Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).",
`4`	`4`	`"tile": "Removes any applied border-radius from the component."`
`5`	`5`	`}`
`6`	`6`	`}`