Repository: lmc-eu/spirit-design-system
Pull request #2006: Feat(web-react): Box `borderRadius` can be used without `borderWidth`
Author: login: literat
Labels: name: bug
description: Something isn't working
name: run-visual-tests
description: Runs visual regression testing on this PR
Created: 2025-03-26T12:04:57Z | Merged: 2025-03-26T15:15:27Z

<!-- Thank you for contributing! -->

## Description

<!-- Please insert your description here and provide especially info about the "what" this PR is solving -->

* we need to apply border radius also on background color without any border width

### Additional context

<!-- e.g. is there anything you'd like reviewers to focus on? -->

### Issue reference

<!-- Please insert a link to the solved issue. If none, create one for this PR and then reference it here -->


https://jira.almacareer.tech/browse/DS-1797#

<!--

### Before submitting the PR, please make sure you do the following

- Read the [Contributing Guidelines](https://github.com/lmc-eu/spirit-design-system/blob/main/CONTRIBUTING.md).
- Follow the [PR Title/Commit Message Convention](https://github.com/lmc-eu/spirit-design-system/blob/main/CONTRIBUTING.md#commit-conventions).
- Provide a description in this PR that addresses **what** the PR is solving, or reference the issue that it solves (e.g. `fixes #123`).
- Ideally, include relevant tests that fail without this PR but pass with it.

-->



Diff:
diff --git a/apps/web-twig-demo/yarn.lock b/apps/web-twig-demo/yarn.lock
index 95c6446134..39dc35e659 100644
--- a/apps/web-twig-demo/yarn.lock
+++ b/apps/web-twig-demo/yarn.lock
@@ -34,22 +34,21 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.8.tgz#821c1d35641c355284d4a870b8a4a7b0c141e367"
   integrity sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==
 
-"@babel/core@7.26.8":
-  version "7.26.8"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.8.tgz#7742f11c75acea6b08a8e24c5c0c8c89e89bf53e"
-  integrity sha512-l+lkXCHS6tQEc5oUpK28xBOZ6+HwaH7YwoYQbLFiYb4nS2/l1tKnZEtEWkD0GuiYdvArf9qBS0XlQGXzPMsNqQ==
+"@babel/core@7.26.10":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.10.tgz#5c876f83c8c4dcb233ee4b670c0606f2ac3000f9"
+  integrity sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
     "@babel/code-frame" "^7.26.2"
-    "@babel/generator" "^7.26.8"
+    "@babel/generator" "^7.26.10"
     "@babel/helper-compilation-targets" "^7.26.5"
     "@babel/helper-module-transforms" "^7.26.0"
-    "@babel/helpers" "^7.26.7"
-    "@babel/parser" "^7.26.8"
-    "@babel/template" "^7.26.8"
-    "@babel/traverse" "^7.26.8"
-    "@babel/types" "^7.26.8"
-    "@types/gensync" "^1.0.0"
+    "@babel/helpers" "^7.26.10"
+    "@babel/parser" "^7.26.10"
+    "@babel/template" "^7.26.9"
+    "@babel/traverse" "^7.26.10"
+    "@babel/types" "^7.26.10"
     convert-source-map "^2.0.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
@@ -67,7 +66,18 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^3.0.2"
 
-"@babel/generator@^7.26.8", "@babel/generator@^7.26.9":
+"@babel/generator@^7.26.10", "@babel/generator@^7.27.0":
+  version "7.27.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.27.0.tgz#764382b5392e5b9aff93cadb190d0745866cbc2c"
+  integrity sha512-VybsKvpiN1gU1sdMZIp7FcqphVVKEwcuj02x73uvcHE0PTihx1nlBcowYWhDwjpoAXRv43+gDzyggGnn1XZhVw==
+  dependencies:
+    "@babel/parser" "^7.27.0"
+    "@babel/types" "^7.27.0"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
+"@babel/generator@^7.26.9":
   version "7.26.9"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.9.tgz#75a9482ad3d0cc7188a537aa4910bc59db67cbca"
   integrity sha512-kEWdzjOAUMW4hAyrzJ0ZaTOu9OmpyDIQicIh0zg0EEcEkYXZb2TjtBhnHi2ViX7PKwZqF4xwqfAm299/QMP3lg==
@@ -294,13 +304,13 @@
     "@babel/traverse" "^7.25.9"
     "@babel/types" "^7.25.9"
 
-"@babel/helpers@^7.26.7":
-  version "7.26.9"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.9.tgz#28f3fb45252fc88ef2dc547c8a911c255fc9fef6"
-  integrity sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==
+"@babel/helpers@^7.26.10":
+  version "7.27.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.27.0.tgz#53d156098defa8243eab0f32fa17589075a1b808"
+  integrity sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==
   dependencies:
-    "@babel/template" "^7.26.9"
-    "@babel/types" "^7.26.9"
+    "@babel/template" "^7.27.0"
+    "@babel/types" "^7.27.0"
 
 "@babel/parser@^7.25.9", "@babel/parser@^7.26.2":
   version "7.26.2"
@@ -309,7 +319,14 @@
   dependencies:
     "@babel/types" "^7.26.0"
 
-"@babel/parser@^7.26.8", "@babel/parser@^7.26.9":
+"@babel/parser@^7.26.10", "@babel/parser@^7.27.0":
+  version "7.27.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.27.0.tgz#3d7d6ee268e41d2600091cbd4e145ffee85a44ec"
+  integrity sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==
+  dependencies:
+    "@babel/types" "^7.27.0"
+
+"@babel/parser@^7.26.9":
   version "7.26.9"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.9.tgz#d9e78bee6dc80f9efd8f2349dcfbbcdace280fd5"
   integrity sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==
@@ -508,12 +525,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-for-of@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz#4bdc7d42a213397905d89f02350c5267866d5755"
-  integrity sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==
+"@babel/plugin-transform-for-of@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.26.9.tgz#27231f79d5170ef33b5111f07fe5cafeb2c96a56"
+  integrity sha512-Hry8AusVm8LW5BVFgiyUReuoGzPUpdHQQqJY5bZnbbf+ngOHWuCuYFKw/BqaaWlvEUrF91HMhDtEaI1hZzNbLg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.26.5"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
 
 "@babel/plugin-transform-function-name@^7.25.9":
@@ -769,10 +786,10 @@
     "@babel/helper-create-regexp-features-plugin" "^7.25.9"
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/preset-env@7.26.8":
-  version "7.26.8"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.26.8.tgz#7af0090829b606d2046db99679004731e1dc364d"
-  integrity sha512-um7Sy+2THd697S4zJEfv/U5MHGJzkN2xhtsR3T/SWRbVSic62nbISh51VVfU9JiO/L/Z97QczHTaFVkOU8IzNg==
+"@babel/preset-env@7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.26.9.tgz#2ec64e903d0efe743699f77a10bdf7955c2123c3"
+  integrity sha512-vX3qPGE8sEKEAZCWk05k3cpTAE3/nOYca++JA+Rd0z2NCNzabmYvEiSShKzm10zdquOIAVXsy2Ei/DTW34KlKQ==
   dependencies:
     "@babel/compat-data" "^7.26.8"
     "@babel/helper-compilation-targets" "^7.26.5"
@@ -803,7 +820,7 @@
     "@babel/plugin-transform-dynamic-import" "^7.25.9"
     "@babel/plugin-transform-exponentiation-operator" "^7.26.3"
     "@babel/plugin-transform-export-namespace-from" "^7.25.9"
-    "@babel/plugin-transform-for-of" "^7.25.9"
+    "@babel/plugin-transform-for-of" "^7.26.9"
     "@babel/plugin-transform-function-name" "^7.25.9"
     "@babel/plugin-transform-json-strings" "^7.25.9"
     "@babel/plugin-transform-literals" "^7.25.9"
@@ -874,7 +891,7 @@
     "@babel/parser" "^7.25.9"
     "@babel/types" "^7.25.9"
 
-"@babel/template@^7.26.8", "@babel/template@^7.26.9":
+"@babel/template@^7.26.9":
   version "7.26.9"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.26.9.tgz#4577ad3ddf43d194528cff4e1fa6b232fa609bb2"
   integrity sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==
@@ -883,6 +900,15 @@
     "@babel/parser" "^7.26.9"
     "@babel/types" "^7.26.9"
 
+"@babel/template@^7.27.0":
+  version "7.27.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.27.0.tgz#b253e5406cc1df1c57dcd18f11760c2dbf40c0b4"
+  integrity sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/parser" "^7.27.0"
+    "@babel/types" "^7.27.0"
+
 "@babel/traverse@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84"
@@ -896,6 +922,19 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
+"@babel/traverse@^7.26.10":
+  version "7.27.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.27.0.tgz#11d7e644779e166c0442f9a07274d02cd91d4a70"
+  integrity sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.27.0"
+    "@babel/parser" "^7.27.0"
+    "@babel/template" "^7.27.0"
+    "@babel/types" "^7.27.0"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/traverse@^7.26.8":
   version "7.26.9"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.9.tgz#4398f2394ba66d05d988b2ad13c219a2c857461a"
@@ -926,7 +965,15 @@
     "@babel/helper-string-parser" "^7.25.9"
     "@babel/helper-validator-identifier" "^7.25.9"
 
-"@babel/types@^7.26.8", "@babel/types@^7.26.9":
+"@babel/types@^7.26.10", "@babel/types@^7.27.0":
+  version "7.27.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.27.0.tgz#ef9acb6b06c3173f6632d993ecb6d4ae470b4559"
+  integrity sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
+"@babel/types@^7.26.9":
   version "7.26.9"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.9.tgz#08b43dec79ee8e682c2ac631c010bdcac54a21ce"
   integrity sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==
@@ -1203,11 +1250,6 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
   integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
 
-"@types/gensync@^1.0.0":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@types/gensync/-/gensync-1.0.4.tgz#7122d8f0cd3bf437f9725cc95b180197190cf50b"
-  integrity sha512-C3YYeRQWp2fmq9OryX+FoDy8nXS6scQ7dPptD8LnFDAUNcKWJjXQKDNJD3HVm+kOUsXhTOkpi69vI4EuAr95bA==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
diff --git a/packages/web-react/src/components/Box/__tests__/Box.test.tsx b/packages/web-react/src/components/Box/__tests__/Box.test.tsx
index 4c8500b3a5..342ccc199a 100644
--- a/packages/web-react/src/components/Box/__tests__/Box.test.tsx
+++ b/packages/web-react/src/components/Box/__tests__/Box.test.tsx
@@ -105,16 +105,6 @@ describe('Box', () => {
     expect(screen.getByTestId('Box')).toHaveClass('rounded-200');
   });
 
-  it('should not render correct border radius class when border width is not set', () => {
-    render(
-      <Box borderRadius="200" data-testid="Box">
-        Content
-      </Box>,
-    );
-
-    expect(screen.getByTestId('Box')).not.toHaveClass('rounded-200');
-  });
-
   it('should render border style', () => {
     render(
       <Box borderStyle="dashed" borderWidth="100" data-testid="Box">
diff --git a/packages/web-react/src/components/Box/__tests__/useBoxStyleProps.test.ts b/packages/web-react/src/components/Box/__tests__/useBoxStyleProps.test.ts
index 3e9426cae0..a25b337676 100644
--- a/packages/web-react/src/components/Box/__tests__/useBoxStyleProps.test.ts
+++ b/packages/web-react/src/components/Box/__tests__/useBoxStyleProps.test.ts
@@ -10,6 +10,14 @@ describe('useBoxStyleProps', () => {
     expect(result.current.classProps).toBe('');
   });
 
+  // handle `|| {}` fallback branch
+  it('should return defaults with props `{}` fallback', () => {
+    const props = undefined;
+    const { result } = renderHook(() => useBoxStyleProps(props as unknown as SpiritBoxProps));
+
+    expect(result.current.classProps).toBe('');
+  });
+
   it('should return background classProps', () => {
     const props: SpiritBoxProps = {
       backgroundColor: 'secondary',
@@ -20,23 +28,12 @@ describe('useBoxStyleProps', () => {
   });
 
   it('should return border radius classProps', () => {
-    const props: SpiritBoxProps = {
-      borderRadius: '200',
-      borderWidth: '100',
-      borderStyle: 'solid',
-    };
-    const { result } = renderHook(() => useBoxStyleProps(props));
-
-    expect(result.current.classProps).toBe('border-basic rounded-200 border-solid border-100');
-  });
-
-  it('should not return border radius classProps if border with is not set', () => {
     const props: SpiritBoxProps = {
       borderRadius: '200',
     };
     const { result } = renderHook(() => useBoxStyleProps(props));
 
-    expect(result.current.classProps).not.toBe('rounded-200');
+    expect(result.current.classProps).toBe('rounded-200');
   });
 
   it('should return border color classProps', () => {
diff --git a/packages/web-react/src/components/Box/demo/BoxWithAll.tsx b/packages/web-react/src/components/Box/demo/BoxWithAll.tsx
new file mode 100644
index 0000000000..d69fab630c
--- /dev/null
+++ b/packages/web-react/src/components/Box/demo/BoxWithAll.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import Box from '../Box';
+
+const BoxWithAll = () => (
+  <>
+    <p>For demo purposes, the boxes have custom padding.</p>
+    <Box padding="space-800" backgroundColor="primary" borderWidth="100">
+      With primary background, solid border and no radius
+    </Box>
+    <Box padding="space-800" backgroundColor="secondary" borderRadius="300" borderStyle="dashed" borderWidth="200">
+      With primary background, custom radius, dashed thicker border
+    </Box>
+    <Box
+      padding="space-800"
+      backgroundColor="tertiary"
+      borderRadius="full"
+      borderStyle="dotted"
+      borderWidth="200"
+      borderColor="basic"
+    >
+      With primary background, full radius, dotted thicker border
+    </Box>
+  </>
+);
+
+export default BoxWithAll;
diff --git a/packages/web-react/src/components/Box/demo/BoxWithBackgroundColor.tsx b/packages/web-react/src/components/Box/demo/BoxWithBackgroundColor.tsx
index 2e8c073677..5de1f3c3a9 100644
--- a/packages/web-react/src/components/Box/demo/BoxWithBackgroundColor.tsx
+++ b/packages/web-react/src/components/Box/demo/BoxWithBackgroundColor.tsx
@@ -3,14 +3,12 @@ import Box from '../Box';
 
 const BoxWithBackgroundColor = () => (
   <>
-    <p>For demo purposes, the boxes are bordered.</p>
-    <Box padding="space-800" borderWidth="100">
-      Primary Background
-    </Box>
-    <Box padding="space-800" borderWidth="100" backgroundColor="secondary">
+    <p>For demo purposes, the boxes have custom padding.</p>
+    <Box padding="space-800">Primary Background</Box>
+    <Box padding="space-800" backgroundColor="secondary">
       Secondary Background
     </Box>
-    <Box padding="space-800" borderWidth="100" backgroundColor="tertiary">
+    <Box padding="space-800" backgroundColor="tertiary">
       Tertiary Background
     </Box>
   </>
diff --git a/packages/web-react/src/components/Box/demo/BoxWithBorder.tsx b/packages/web-react/src/components/Box/demo/BoxWithBorder.tsx
index 67741292e3..3ff0b38588 100644
--- a/packages/web-react/src/components/Box/demo/BoxWithBorder.tsx
+++ b/packages/web-react/src/components/Box/demo/BoxWithBorder.tsx
@@ -5,20 +5,17 @@ const BoxWithBorder = () => (
   <>
     <p>For demo purposes, the boxes have custom padding.</p>
     <Box padding="space-800" borderWidth="100">
-      Without radius
+      With solid border style
     </Box>
-    <Box padding="space-800" borderWidth="100" borderRadius="300">
-      With custom radius
-    </Box>
-    <Box padding="space-800" borderWidth="100" borderRadius="full">
-      With full radius
-    </Box>
-    <Box padding="space-800" borderWidth="200" borderRadius="300">
-      With thicker border
+    <Box padding="space-800" borderWidth="100" borderStyle="dotted">
+      With dotted border style
     </Box>
     <Box padding="space-800" borderWidth="100" borderStyle="dashed">
       With dashed border style
     </Box>
+    <Box padding="space-800" borderWidth="200">
+      With thicker border
+    </Box>
   </>
 );
 
diff --git a/packages/web-react/src/components/Box/demo/BoxWithRadius.tsx b/packages/web-react/src/components/Box/demo/BoxWithRadius.tsx
new file mode 100644
index 0000000000..d0afbb50c7
--- /dev/null
+++ b/packages/web-react/src/components/Box/demo/BoxWithRadius.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import Box from '../Box';
+
+const BoxWithRadius = () => (
+  <>
+    <p>For demo purposes, the boxes have custom padding.</p>
+    <Box padding="space-800" backgroundColor="secondary">
+      Without radius
+    </Box>
+    <Box padding="space-800" backgroundColor="secondary" borderRadius="300">
+      With custom radius
+    </Box>
+    <Box padding="space-800" backgroundColor="secondary" borderRadius="full">
+      With full radius
+    </Box>
+  </>
+);
+
+export default BoxWithRadius;
diff --git a/packages/web-react/src/components/Box/demo/index.tsx b/packages/web-react/src/components/Box/demo/index.tsx
index d909783c43..b8695a4023 100644
--- a/packages/web-react/src/components/Box/demo/index.tsx
+++ b/packages/web-react/src/components/Box/demo/index.tsx
@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import DocsSection from '../../../../docs/DocsSection';
 import BoxDefault from './BoxDefault';
+import BoxWithAll from './BoxWithAll';
 import BoxWithBackgroundColor from './BoxWithBackgroundColor';
 import BoxWithBorder from './BoxWithBorder';
 import BoxWithCustomPadding from './BoxWithCustomPadding';
+import BoxWithRadius from './BoxWithRadius';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
+  <StrictMode>
     <DocsSection title="Default">
       <BoxDefault />
     </DocsSection>
@@ -20,5 +22,11 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <DocsSection title="With Background Color">
       <BoxWithBackgroundColor />
     </DocsSection>
-  </React.StrictMode>,
+    <DocsSection title="With Radius">
+      <BoxWithRadius />
+    </DocsSection>
+    <DocsSection title="With All">
+      <BoxWithAll />
+    </DocsSection>
+  </StrictMode>,
 );
diff --git a/packages/web-react/src/components/Box/useBoxStyleProps.ts b/packages/web-react/src/components/Box/useBoxStyleProps.ts
index 0fc4c9a80a..2415a9b4b6 100644
--- a/packages/web-react/src/components/Box/useBoxStyleProps.ts
+++ b/packages/web-react/src/components/Box/useBoxStyleProps.ts
@@ -21,13 +21,12 @@ export const useBoxStyleProps = (
 
   const boxBackgroundColor = backgroundColor ? boxBackgroundClassName : '';
   let boxBorderColor = borderColor ? borderColor.replace('', boxBorderClassName) : '';
-  let boxBorderRadius = '';
   let boxBorderStyle = '';
   const boxBorderWidth = borderWidth ? borderWidth.replace('', boxBorderClassName) : '';
+  const boxBorderRadius = borderRadius ? borderRadius.replace('', boxRadiusClassName) : '';
 
   if (borderWidth && parseInt(borderWidth, 10) > 0) {
     boxBorderStyle = `${boxBorderClassName}${borderStyle}`;
-    boxBorderRadius = borderRadius ? borderRadius.replace('', boxRadiusClassName) : '';
     if (!borderColor) {
       boxBorderColor = `${boxBorderClassName}${BorderColors.BASIC}`;
     }
diff --git a/packages/web/src/scss/components/Box/index.html b/packages/web/src/scss/components/Box/index.html
index b642714138..cfad9cd3b7 100644
--- a/packages/web/src/scss/components/Box/index.html
+++ b/packages/web/src/scss/components/Box/index.html
@@ -31,11 +31,10 @@ <h2 class="docs-Heading">With Border</h2>
     <div class="docs-Stack docs-Stack--start">
 
       <p>For demo purposes, the boxes have custom padding.</p>
-      <div class="border-basic border-100 border-solid p-800">Without radius</div>
-      <div class="border-basic rounded-300 border-100 border-solid p-800">With custom radius</div>
-      <div class="border-basic rounded-full border-100 border-solid p-800">With full radius</div>
-      <div class="border-basic rounded-300 border-200 border-solid p-800">With thicker border</div>
+      <div class="border-basic border-100 border-solid p-800">With solid border style</div>
+      <div class="border-basic border-100 border-dotted p-800">With dotted border style</div>
       <div class="border-basic border-100 border-dashed p-800">With dashed border style</div>
+      <div class="border-basic border-200 border-solid p-800">With thicker border</div>
     </div>
   </div>
 </section>
@@ -45,14 +44,38 @@ <h2 class="docs-Heading">With Border</h2>
     <h2 class="docs-Heading">With Background Color</h2>
     <div class="docs-Stack docs-Stack--start">
 
-      <p>For demo purposes, the boxes are bordered.</p>
-      <div class="bg-primary border-100 border-solid border-basic p-800">Primary Background</div>
-      <div class="bg-secondary border-100 border-solid border-basic p-800">Secondary Background</div>
-      <div class="bg-tertiary border-100 border-solid border-basic p-800">Tertiary Background</div>
+      <p>For demo purposes, the boxes have custom padding.</p>
+      <div class="bg-primary p-800">Primary Background</div>
+      <div class="bg-secondary p-800">Secondary Background</div>
+      <div class="bg-tertiary p-800">Tertiary Background</div>
     </div>
   </div>
 </section>
 
-{{/web/layout/default }}
+<section class="py-900 py-tablet-1000">
+  <div class="Container">
+    <h2 class="docs-Heading">With Radius</h2>
+    <div class="docs-Stack docs-Stack--start">
+
+      <p>For demo purposes, the boxes have custom padding.</p>
+      <div class="bg-secondary p-800">Without radius</div>
+      <div class="bg-secondary rounded-300 p-800">With custom radius</div>
+      <div class="bg-secondary rounded-full p-800">With full radius</div>
+    </div>
+  </div>
+</section>
+
+<section class="py-900 py-tablet-1000">
+  <div class="Container">
+    <h2 class="docs-Heading">With All</h2>
+    <div class="docs-Stack docs-Stack--start">
 
+      <p>For demo purposes, the boxes have custom padding.</p>
+      <div class="bg-primary border-basic border-solid border-100 p-800">With primary background, solid border and no radius</div>
+      <div class="bg-secondary border-basic border-dashed rounded-300 border-200 p-800">With primary background, custom radius, dashed thicker border</div>
+      <div class="bg-tertiary border-basic border-dotted rounded-full border-200 p-800">With primary background, full radius, dotted thicker border</div>
+    </div>
+  </div>
+</section>
 
+{{/web/layout/default }}
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/box-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/box-chromium-linux.png
index f837a24708..5ab2451f81 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/box-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/box-chromium-linux.png differ


Reviews:
user: login: vmilersky
body: LGTM
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T12:10:12Z
user: login: dlouhak
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T12:17:24Z
user: login: dlouhak
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T12:20:28Z
user: login: literat
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-26T12:24:57Z
user: login: dlouhak
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T12:25:50Z
user: login: curdaj
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T13:26:06Z
user: login: literat
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-26T13:50:36Z
user: login: dlouhak
body: A few nitpicking comments, otherwise LGTM.
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T14:08:34Z
user: login: literat
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-26T14:17:09Z
user: login: literat
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-26T14:21:38Z
user: login: pavelklibani
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T15:06:22Z

Review comments:
path: packages/web-react/src/components/Box/demo/BoxWithRadius.tsx
user: login: dlouhak
body: I was wondering if we wouldn't like to support a responsive border radius. In the handoff of Job offers, there is a Box component with a small border radius for mobile and the rest of the screen sizes have another value (and I can imagine it would be a frequent scenario for other compositions as well).

So probably we should create a new issue for that behavior.
created_at: 2025-03-26T12:17:23Z
author_association: CONTRIBUTOR
path: packages/web/src/scss/components/Box/index.html
user: login: dlouhak
body: I would remove radius examples from `With Border` section, because you've introduced section `With Radius`.
created_at: 2025-03-26T12:20:28Z
author_association: CONTRIBUTOR
path: packages/web-react/src/components/Box/demo/BoxWithRadius.tsx
user: login: literat
body: Yes, I agree with creating a new issue based on your suggestion. Let's focus here on just enabling the `borderRadius` prop without any condition. We can add responsivnes in the future.
created_at: 2025-03-26T12:24:57Z
author_association: COLLABORATOR
path: packages/web-react/src/components/Box/demo/BoxWithRadius.tsx
user: login: dlouhak
body: → [DS-1798](https://jira.almacareer.tech/browse/DS-1798)
created_at: 2025-03-26T12:25:50Z
author_association: CONTRIBUTOR
path: packages/web/src/scss/components/Box/index.html
user: login: literat
body: Ok, I have updated the demos.
created_at: 2025-03-26T13:50:36Z
author_association: COLLABORATOR
diff_hunk: @@ -46,13 +45,37 @@ <h2 class="docs-Heading">With Background Color</h2>
     <div class="docs-Stack docs-Stack--start">
 
       <p>For demo purposes, the boxes are bordered.</p>
path: packages/web/src/scss/components/Box/index.html
user: login: dlouhak
body: ```suggestion
      <p>For demo purposes, the boxes have custom padding.</p>
```
created_at: 2025-03-26T14:05:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -46,13 +45,37 @@ <h2 class="docs-Heading">With Background Color</h2>
     <div class="docs-Stack docs-Stack--start">
 
       <p>For demo purposes, the boxes are bordered.</p>
-      <div class="bg-primary border-100 border-solid border-basic p-800">Primary Background</div>
-      <div class="bg-secondary border-100 border-solid border-basic p-800">Secondary Background</div>
-      <div class="bg-tertiary border-100 border-solid border-basic p-800">Tertiary Background</div>
+      <div class="bg-primary border-100 p-800">Primary Background</div>
+      <div class="bg-secondary border-100 p-800">Secondary Background</div>
+      <div class="bg-tertiary border-100 p-800">Tertiary Background</div>
path: packages/web/src/scss/components/Box/index.html
user: login: dlouhak
body: ```suggestion
      <div class="bg-primary p-800">Primary Background</div>
      <div class="bg-secondary p-800">Secondary Background</div>
      <div class="bg-tertiary p-800">Tertiary Background</div>
```
created_at: 2025-03-26T14:06:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -46,13 +45,37 @@ <h2 class="docs-Heading">With Background Color</h2>
     <div class="docs-Stack docs-Stack--start">
 
       <p>For demo purposes, the boxes are bordered.</p>
path: packages/web/src/scss/components/Box/index.html
user: login: dlouhak
body: Apply changes in web-react as well.
created_at: 2025-03-26T14:06:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -46,13 +45,37 @@ <h2 class="docs-Heading">With Background Color</h2>
     <div class="docs-Stack docs-Stack--start">
 
       <p>For demo purposes, the boxes are bordered.</p>
-      <div class="bg-primary border-100 border-solid border-basic p-800">Primary Background</div>
-      <div class="bg-secondary border-100 border-solid border-basic p-800">Secondary Background</div>
-      <div class="bg-tertiary border-100 border-solid border-basic p-800">Tertiary Background</div>
+      <div class="bg-primary border-100 p-800">Primary Background</div>
+      <div class="bg-secondary border-100 p-800">Secondary Background</div>
+      <div class="bg-tertiary border-100 p-800">Tertiary Background</div>
path: packages/web/src/scss/components/Box/index.html
user: login: dlouhak
body: Apply changes in web-react as well.
created_at: 2025-03-26T14:07:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -46,13 +45,37 @@ <h2 class="docs-Heading">With Background Color</h2>
     <div class="docs-Stack docs-Stack--start">
 
       <p>For demo purposes, the boxes are bordered.</p>
path: packages/web/src/scss/components/Box/index.html
user: login: literat
body: Fixed.
created_at: 2025-03-26T14:17:08Z
author_association: COLLABORATOR
diff_hunk: @@ -46,13 +45,37 @@ <h2 class="docs-Heading">With Background Color</h2>
     <div class="docs-Stack docs-Stack--start">
 
       <p>For demo purposes, the boxes are bordered.</p>
-      <div class="bg-primary border-100 border-solid border-basic p-800">Primary Background</div>
-      <div class="bg-secondary border-100 border-solid border-basic p-800">Secondary Background</div>
-      <div class="bg-tertiary border-100 border-solid border-basic p-800">Tertiary Background</div>
+      <div class="bg-primary border-100 p-800">Primary Background</div>
+      <div class="bg-secondary border-100 p-800">Secondary Background</div>
+      <div class="bg-tertiary border-100 p-800">Tertiary Background</div>
path: packages/web/src/scss/components/Box/index.html
user: login: literat
body: Fixed.
created_at: 2025-03-26T14:21:37Z
author_association: COLLABORATOR

PR comments:
user: login: netlify[bot]
created_at: 2025-03-26T12:05:20Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *spirit-design-system-storybook* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | aa587a9a3c2d2b0823f000ddffd049aecb8b7dd4 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/spirit-design-system-storybook/deploys/67e416eaff02ac00082e3842 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-2006--spirit-design-system-storybook.netlify.app](https://deploy-preview-2006--spirit-design-system-storybook.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTIwMDYtLXNwaXJpdC1kZXNpZ24tc3lzdGVtLXN0b3J5Ym9vay5uZXRsaWZ5LmFwcCJ9.h8aWbPvm6It11X7uR0oqPCvloz2iPA6ThOaRfkKwCpM)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [spirit-design-system-storybook Preview](https://deploy-preview-2006--spirit-design-system-storybook.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/spirit-design-system-storybook/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: netlify[bot]
created_at: 2025-03-26T12:08:29Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *spirit-design-system* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | aa587a9a3c2d2b0823f000ddffd049aecb8b7dd4 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/spirit-design-system/deploys/67e416eaff02ac00082e3846 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-2006--spirit-design-system.netlify.app](https://deploy-preview-2006--spirit-design-system.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTIwMDYtLXNwaXJpdC1kZXNpZ24tc3lzdGVtLm5ldGxpZnkuYXBwIn0.n_RbI-qgvtXizS3eQMPbOR9OncigGnKr4SMR-bLuznc)<br /><br />_Use your smartphone camera to open QR code link._</details> |
|<span aria-hidden="true">![Lighthouse](https://app.netlify.com/public/external-usage/git-comments/lighthouse-sm.png)</span><br />Lighthouse | 1 paths audited<br />**Performance**: 96 (no change from production)<br />**Accessibility**: 100 (no change from production)<br />**Best Practices**: 100 (no change from production)<br />**SEO**: 90 (no change from production)<br />**PWA**: -<br />[View the detailed breakdown and full score reports](https://app.netlify.com/sites/spirit-design-system/deploys/67e416eaff02ac00082e3846) |
---
<!-- [spirit-design-system Preview](https://deploy-preview-2006--spirit-design-system.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/spirit-design-system/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-03-26T14:09:02Z
body: Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/14085188379/artifacts/2824017991
author_association: CONTRIBUTOR