diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
index 446bb3449f..ae7294e29a 100644
--- a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
+++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
@@ -195,11 +195,11 @@ export default {
 	display: flex;
 	align-items: center;
 	flex-direction: row;
-	gap: 4px;
+	gap: var(--default-grid-baseline);
 	user-select: none;
 	min-height: var(--default-clickable-area);
-	border-radius: var(--default-clickable-area);
-	padding: 4px calc((var(--default-clickable-area) - var(--icon-height)) / 2);
+	border-radius: var(--checkbox-radio-switch--border-radius);
+	padding: var(--default-grid-baseline) calc((var(--default-clickable-area) - var(--icon-height)) / 2);
 	// Set to 100% to make text overflow work on button style
 	width: 100%;
 	// but restrict to content so plain checkboxes / radio switches do not expand
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
index d4e534d5a3..07fc4addbd 100644
--- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
+++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -682,9 +682,9 @@ export default {
 		color: var(--color-primary-element-light);
 	}
 
-	$border-radius: calc(var(--default-clickable-area) / 2);
+	--checkbox-radio-switch--border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
 	// keep inner border width in mind
-	$border-radius-outer: calc($border-radius + 2px);
+	--checkbox-radio-switch--border-radius-outer: calc(var(--checkbox-radio-switch--border-radius) + 2px);
 
 	&--button-variant.checkbox-radio-switch {
 		background-color: var(--color-main-background);
@@ -721,7 +721,7 @@ export default {
 
 	&--button-variant:not(&--button-variant-v-grouped):not(&--button-variant-h-grouped),
 	&--button-variant &__content {
-		border-radius: $border-radius;
+		border-radius: var(--checkbox-radio-switch--border-radius);
 	}
 
 	/* Special rules for vertical button groups */
@@ -732,12 +732,12 @@ export default {
 	}
 	&--button-variant-v-grouped {
 		&:first-of-type {
-			border-top-left-radius: $border-radius-outer;
-			border-top-right-radius: $border-radius-outer;
+			border-top-left-radius: var(--checkbox-radio-switch--border-radius-outer);
+			border-top-right-radius: var(--checkbox-radio-switch--border-radius-outer);
 		}
 		&:last-of-type {
-			border-bottom-left-radius: $border-radius-outer;
-			border-bottom-right-radius: $border-radius-outer;
+			border-bottom-left-radius: var(--checkbox-radio-switch--border-radius-outer);
+			border-bottom-right-radius: var(--checkbox-radio-switch--border-radius-outer);
 		}
 
 		// remove borders between elements
@@ -755,12 +755,12 @@ export default {
 	/* Special rules for horizontal button groups */
 	&--button-variant-h-grouped {
 		&:first-of-type {
-			border-top-left-radius: $border-radius-outer;
-			border-bottom-left-radius: $border-radius-outer;
+			border-top-left-radius: var(--checkbox-radio-switch--border-radius-outer);
+			border-bottom-left-radius: var(--checkbox-radio-switch--border-radius-outer);
 		}
 		&:last-of-type {
-			border-top-right-radius: $border-radius-outer;
-			border-bottom-right-radius: $border-radius-outer;
+			border-top-right-radius: var(--checkbox-radio-switch--border-radius-outer);
+			border-bottom-right-radius: var(--checkbox-radio-switch--border-radius-outer);
 		}
 
 		// remove borders between elements