# Radius Utilities for controlling the border radius of an element. Includes support for sides, corners, and various sizes. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-radius--introduction ## Variants documented in Storybook - RadiusShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-radius--radiusshowcase ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Radius. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Utilities

Radius Utilities Reference

A comprehensive reference of all border radius utility classes, including side-specific and corner-specific variants.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

All Corners

Format: ux4g-radius-{corner}-{size}

Radius None (0px) ux4g-radius-none
Radius Small (4px) ux4g-radius-s
Radius Medium (8px) ux4g-radius-m
Radius Large (12px) ux4g-radius-l
Radius Full (9999px) ux4g-radius-full

Top Corners

Format: ux4g-radius-{corner}-{size}

Radius Top None (0px) ux4g-radius-top-none
Radius Top Small (4px) ux4g-radius-top-s
Radius Top Medium (8px) ux4g-radius-top-m
Radius Top Large (12px) ux4g-radius-top-l
Radius Top Full (9999px) ux4g-radius-top-full

Bottom Corners

Format: ux4g-radius-{corner}-{size}

Radius Bottom None (0px) ux4g-radius-bottom-none
Radius Bottom Small (4px) ux4g-radius-bottom-s
Radius Bottom Medium (8px) ux4g-radius-bottom-m
Radius Bottom Large (12px) ux4g-radius-bottom-l
Radius Bottom Full (9999px) ux4g-radius-bottom-full

Left Corners

Format: ux4g-radius-{corner}-{size}

Radius Left None (0px) ux4g-radius-left-none
Radius Left Small (4px) ux4g-radius-left-s
Radius Left Medium (8px) ux4g-radius-left-m
Radius Left Large (12px) ux4g-radius-left-l
Radius Left Full (9999px) ux4g-radius-left-full

Right Corners

Format: ux4g-radius-{corner}-{size}

Radius Right None (0px) ux4g-radius-right-none
Radius Right Small (4px) ux4g-radius-right-s
Radius Right Medium (8px) ux4g-radius-right-m
Radius Right Large (12px) ux4g-radius-right-l
Radius Right Full (9999px) ux4g-radius-right-full

Individual Corners

Format: ux4g-radius-{corner}-{size}

Radius Top Left Small (4px) ux4g-radius-tl-s
Radius Top Right Small (4px) ux4g-radius-tr-s
Radius Bottom Left Small (4px) ux4g-radius-bl-s
Radius Bottom Right Small (4px) ux4g-radius-br-s
Radius Top Left Medium (8px) ux4g-radius-tl-m
Radius Top Right Medium (8px) ux4g-radius-tr-m
Radius Bottom Left Medium (8px) ux4g-radius-bl-m
Radius Bottom Right Medium (8px) ux4g-radius-br-m
Radius Top Left Large (12px) ux4g-radius-tl-l
Radius Top Right Large (12px) ux4g-radius-tr-l
Radius Bottom Left Large (12px) ux4g-radius-bl-l
Radius Bottom Right Large (12px) ux4g-radius-br-l
Radius Top Left Full (9999px) ux4g-radius-tl-full
Radius Top Right Full (9999px) ux4g-radius-tr-full
Radius Bottom Left Full (9999px) ux4g-radius-bl-full
Radius Bottom Right Full (9999px) ux4g-radius-br-full
``` React: ```jsx import React from 'react'; const RadiusExample1Demo = () => ( <>
Utilities

Radius Utilities Reference

A comprehensive reference of all border radius utility classes, including side-specific and corner-specific variants.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

{/* Base Radius */}

All Corners

Format: ux4g-radius-{corner}-{size}

Radius None (0px) ux4g-radius-none
Radius Small (4px) ux4g-radius-s
Radius Medium (8px) ux4g-radius-m
Radius Large (12px) ux4g-radius-l
Radius Full (9999px) ux4g-radius-full
{/* Top Corners */}

Top Corners

Format: ux4g-radius-{corner}-{size}

Radius Top None (0px) ux4g-radius-top-none
Radius Top Small (4px) ux4g-radius-top-s
Radius Top Medium (8px) ux4g-radius-top-m
Radius Top Large (12px) ux4g-radius-top-l
Radius Top Full (9999px) ux4g-radius-top-full
{/* Bottom Corners */}

Bottom Corners

Format: ux4g-radius-{corner}-{size}

Radius Bottom None (0px) ux4g-radius-bottom-none
Radius Bottom Small (4px) ux4g-radius-bottom-s
Radius Bottom Medium (8px) ux4g-radius-bottom-m
Radius Bottom Large (12px) ux4g-radius-bottom-l
Radius Bottom Full (9999px) ux4g-radius-bottom-full
{/* Left Corners */}

Left Corners

Format: ux4g-radius-{corner}-{size}

Radius Left None (0px) ux4g-radius-left-none
Radius Left Small (4px) ux4g-radius-left-s
Radius Left Medium (8px) ux4g-radius-left-m
Radius Left Large (12px) ux4g-radius-left-l
Radius Left Full (9999px) ux4g-radius-left-full
{/* Right Corners */}

Right Corners

Format: ux4g-radius-{corner}-{size}

Radius Right None (0px) ux4g-radius-right-none
Radius Right Small (4px) ux4g-radius-right-s
Radius Right Medium (8px) ux4g-radius-right-m
Radius Right Large (12px) ux4g-radius-right-l
Radius Right Full (9999px) ux4g-radius-right-full
{/* Individual Corners */}

Individual Corners

Format: ux4g-radius-{corner}-{size}

Radius Top Left Small (4px) ux4g-radius-tl-s
Radius Top Right Small (4px) ux4g-radius-tr-s
Radius Bottom Left Small (4px) ux4g-radius-bl-s
Radius Bottom Right Small (4px) ux4g-radius-br-s
Radius Top Left Medium (8px) ux4g-radius-tl-m
Radius Top Right Medium (8px) ux4g-radius-tr-m
Radius Bottom Left Medium (8px) ux4g-radius-bl-m
Radius Bottom Right Medium (8px) ux4g-radius-br-m
Radius Top Left Large (12px) ux4g-radius-tl-l
Radius Top Right Large (12px) ux4g-radius-tr-l
Radius Bottom Left Large (12px) ux4g-radius-bl-l
Radius Bottom Right Large (12px) ux4g-radius-br-l
Radius Top Left Full (9999px) ux4g-radius-tl-full
Radius Top Right Full (9999px) ux4g-radius-tr-full
Radius Bottom Left Full (9999px) ux4g-radius-bl-full
Radius Bottom Right Full (9999px) ux4g-radius-br-full
); export default RadiusExample1Demo; ``` Angular: ```html
Utilities

Radius Utilities Reference

A comprehensive reference of all border radius utility classes, including side-specific and corner-specific variants.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

All Corners

Format: ux4g-radius-{corner}-{size}

Radius None (0px) ux4g-radius-none
Radius Small (4px) ux4g-radius-s
Radius Medium (8px) ux4g-radius-m
Radius Large (12px) ux4g-radius-l
Radius Full (9999px) ux4g-radius-full

Top Corners

Format: ux4g-radius-{corner}-{size}

Radius Top None (0px) ux4g-radius-top-none
Radius Top Small (4px) ux4g-radius-top-s
Radius Top Medium (8px) ux4g-radius-top-m
Radius Top Large (12px) ux4g-radius-top-l
Radius Top Full (9999px) ux4g-radius-top-full

Bottom Corners

Format: ux4g-radius-{corner}-{size}

Radius Bottom None (0px) ux4g-radius-bottom-none
Radius Bottom Small (4px) ux4g-radius-bottom-s
Radius Bottom Medium (8px) ux4g-radius-bottom-m
Radius Bottom Large (12px) ux4g-radius-bottom-l
Radius Bottom Full (9999px) ux4g-radius-bottom-full

Left Corners

Format: ux4g-radius-{corner}-{size}

Radius Left None (0px) ux4g-radius-left-none
Radius Left Small (4px) ux4g-radius-left-s
Radius Left Medium (8px) ux4g-radius-left-m
Radius Left Large (12px) ux4g-radius-left-l
Radius Left Full (9999px) ux4g-radius-left-full

Right Corners

Format: ux4g-radius-{corner}-{size}

Radius Right None (0px) ux4g-radius-right-none
Radius Right Small (4px) ux4g-radius-right-s
Radius Right Medium (8px) ux4g-radius-right-m
Radius Right Large (12px) ux4g-radius-right-l
Radius Right Full (9999px) ux4g-radius-right-full

Individual Corners

Format: ux4g-radius-{corner}-{size}

Radius Top Left Small (4px) ux4g-radius-tl-s
Radius Top Right Small (4px) ux4g-radius-tr-s
Radius Bottom Left Small (4px) ux4g-radius-bl-s
Radius Bottom Right Small (4px) ux4g-radius-br-s
Radius Top Left Medium (8px) ux4g-radius-tl-m
Radius Top Right Medium (8px) ux4g-radius-tr-m
Radius Bottom Left Medium (8px) ux4g-radius-bl-m
Radius Bottom Right Medium (8px) ux4g-radius-br-m
Radius Top Left Large (12px) ux4g-radius-tl-l
Radius Top Right Large (12px) ux4g-radius-tr-l
Radius Bottom Left Large (12px) ux4g-radius-bl-l
Radius Bottom Right Large (12px) ux4g-radius-br-l
Radius Top Left Full (9999px) ux4g-radius-tl-full
Radius Top Right Full (9999px) ux4g-radius-tr-full
Radius Bottom Left Full (9999px) ux4g-radius-bl-full
Radius Bottom Right Full (9999px) ux4g-radius-br-full
``` ### 2. Radius Showcase — Basic Radius (All Corners) HTML: ```html
...
...
...
...
...
``` React: ```jsx import React from 'react'; const RadiusExample2Demo = () => ( <> {/* ux4g-radius-none: No radius */}
...
{/* ux4g-radius-s: Small radius */}
...
{/* ux4g-radius-m: Medium radius */}
...
{/* ux4g-radius-l: Large radius */}
...
{/* ux4g-radius-full: Full radius (pill/circle) */}
...
); export default RadiusExample2Demo; ``` Angular: ```html
...
...
...
...
...
``` ### 3. Radius Showcase — Top Side Radius HTML: ```html
...
...
...
...
...
``` React: ```jsx import React from 'react'; const RadiusExample3Demo = () => ( <> {/* ux4g-radius-top-none: Top Side No radius */}
...
{/* ux4g-radius-top-s: Top Side Small radius */}
...
{/* ux4g-radius-top-m: Top Side Medium radius */}
...
{/* ux4g-radius-top-l: Top Side Large radius */}
...
{/* ux4g-radius-top-full: Top Side Full radius */}
...
); export default RadiusExample3Demo; ``` Angular: ```html
...
...
...
...
...
``` ### 4. Radius Showcase — Bottom Side Radius HTML: ```html
...
...
...
...
...
``` React: ```jsx import React from 'react'; const RadiusExample4Demo = () => ( <> {/* ux4g-radius-bottom-none: Bottom Side No radius */}
...
{/* ux4g-radius-bottom-s: Bottom Side Small radius */}
...
{/* ux4g-radius-bottom-m: Bottom Side Medium radius */}
...
{/* ux4g-radius-bottom-l: Bottom Side Large radius */}
...
{/* ux4g-radius-bottom-full: Bottom Side Full radius */}
...
); export default RadiusExample4Demo; ``` Angular: ```html
...
...
...
...
...
``` ### 5. Radius Showcase — Left Side Radius HTML: ```html
...
...
...
...
...
``` React: ```jsx import React from 'react'; const RadiusExample5Demo = () => ( <> {/* ux4g-radius-left-none: Left Side No radius */}
...
{/* ux4g-radius-left-s: Left Side Small radius */}
...
{/* ux4g-radius-left-m: Left Side Medium radius */}
...
{/* ux4g-radius-left-l: Left Side Large radius */}
...
{/* ux4g-radius-left-full: Left Side Full radius */}
...
); export default RadiusExample5Demo; ``` Angular: ```html
...
...
...
...
...
``` ### 6. Radius Showcase — Right Side Radius HTML: ```html
...
...
...
...
...
``` React: ```jsx import React from 'react'; const RadiusExample6Demo = () => ( <> {/* ux4g-radius-right-none: Right Side No radius */}
...
{/* ux4g-radius-right-s: Right Side Small radius */}
...
{/* ux4g-radius-right-m: Right Side Medium radius */}
...
{/* ux4g-radius-right-l: Right Side Large radius */}
...
{/* ux4g-radius-right-full: Right Side Full radius */}
...
); export default RadiusExample6Demo; ``` Angular: ```html
...
...
...
...
...
``` ### 7. Radius Showcase — Individual Corners (Large) HTML: ```html
...
...
...
...
``` React: ```jsx import React from 'react'; const RadiusExample7Demo = () => ( <> {/* ux4g-radius-tl-l: Top Left Large radius */}
...
{/* ux4g-radius-tr-l: Top Right Large radius */}
...
{/* ux4g-radius-bl-l: Bottom Left Large radius */}
...
{/* ux4g-radius-br-l: Bottom Right Large radius */}
...
); export default RadiusExample7Demo; ``` Angular: ```html
...
...
...
...
``` ### 8. Radius Showcase — Individual Corners (Full) HTML: ```html
...
...
...
...
``` React: ```jsx import React from 'react'; const RadiusExample8Demo = () => ( <> {/* ux4g-radius-tl-full: Top Left Full radius */}
...
{/* ux4g-radius-tr-full: Top Right Full radius */}
...
{/* ux4g-radius-bl-full: Bottom Left Full radius */}
...
{/* ux4g-radius-br-full: Bottom Right Full radius */}
...
); export default RadiusExample8Demo; ``` Angular: ```html
...
...
...
...
``` ## CSS class reference The following CSS partials define the Radius utility classes used in the examples above: ### radius.utilities.css ```css /* Border Radius - All */ .ux4g-radius-none { border-radius: var(--ux4g-radius-0) !important; } .ux4g-radius-s { border-radius: var(--ux4g-radius-sm) !important; } .ux4g-radius-m { border-radius: var(--ux4g-radius-md) !important; } .ux4g-radius-l { border-radius: var(--ux4g-radius-lg) !important; } .ux4g-radius-full { border-radius: var(--ux4g-radius-full) !important; } /* Top Corners (Angle Radius) */ .ux4g-radius-top-none { border-top-left-radius: var(--ux4g-radius-0) !important; border-top-right-radius: var(--ux4g-radius-0) !important; } .ux4g-radius-top-s { border-top-left-radius: var(--ux4g-radius-sm) !important; border-top-right-radius: var(--ux4g-radius-sm) !important; } .ux4g-radius-top-m { border-top-left-radius: var(--ux4g-radius-md) !important; border-top-right-radius: var(--ux4g-radius-md) !important; } .ux4g-radius-top-l { border-top-left-radius: var(--ux4g-radius-lg) !important; border-top-right-radius: var(--ux4g-radius-lg) !important; } .ux4g-radius-top-full { border-top-left-radius: var(--ux4g-radius-full) !important; border-top-right-radius: var(--ux4g-radius-full) !important; } /* Bottom Corners */ .ux4g-radius-bottom-none { border-bottom-left-radius: var(--ux4g-radius-0) !important; border-bottom-right-radius: var(--ux4g-radius-0) !important; } .ux4g-radius-bottom-s { border-bottom-left-radius: var(--ux4g-radius-sm) !important; border-bottom-right-radius: var(--ux4g-radius-sm) !important; } .ux4g-radius-bottom-m { border-bottom-left-radius: var(--ux4g-radius-md) !important; border-bottom-right-radius: var(--ux4g-radius-md) !important; } .ux4g-radius-bottom-l { border-bottom-left-radius: var(--ux4g-radius-lg) !important; border-bottom-right-radius: var(--ux4g-radius-lg) !important; } .ux4g-radius-bottom-full { border-bottom-left-radius: var(--ux4g-radius-full) !important; border-bottom-right-radius: var(--ux4g-radius-full) !important; } /* left Corners */ .ux4g-radius-left-none { border-top-left-radius: var(--ux4g-radius-0) !important; border-bottom-left-radius: var(--ux4g-radius-0) !important; } .ux4g-radius-left-s { border-top-left-radius: var(--ux4g-radius-sm) !important; border-bottom-left-radius: var(--ux4g-radius-sm) !important; } .ux4g-radius-left-m { border-top-left-radius: var(--ux4g-radius-md) !important; border-bottom-left-radius: var(--ux4g-radius-md) !important; } .ux4g-radius-left-l { border-top-left-radius: var(--ux4g-radius-lg) !important; border-bottom-left-radius: var(--ux4g-radius-lg) !important; } .ux4g-radius-left-full { border-top-left-radius: var(--ux4g-radius-full) !important; border-bottom-left-radius: var(--ux4g-radius-full) !important; } /* right Corners */ .ux4g-radius-right-none { border-top-right-radius: var(--ux4g-radius-0) !important; border-bottom-right-radius: var(--ux4g-radius-0) !important; } .ux4g-radius-right-s { border-top-right-radius: var(--ux4g-radius-sm) !important; border-bottom-right-radius: var(--ux4g-radius-sm) !important; } .ux4g-radius-right-m { border-top-right-radius: var(--ux4g-radius-md) !important; border-bottom-right-radius: var(--ux4g-radius-md) !important; } .ux4g-radius-right-l { border-top-right-radius: var(--ux4g-radius-lg) !important; border-bottom-right-radius: var(--ux4g-radius-lg) !important; } .ux4g-radius-right-full { border-top-right-radius: var(--ux4g-radius-full) !important; border-bottom-right-radius: var(--ux4g-radius-full) !important; } /* Individual Angle (Most Powerful) */ .ux4g-radius-tl-s { border-top-left-radius: var(--ux4g-radius-sm) !important; } .ux4g-radius-tr-s { border-top-right-radius: var(--ux4g-radius-sm) !important; } .ux4g-radius-bl-s { border-bottom-left-radius: var(--ux4g-radius-sm) !important; } .ux4g-radius-br-s { border-bottom-right-radius: var(--ux4g-radius-sm) !important; } .ux4g-radius-tl-m { border-top-left-radius: var(--ux4g-radius-md) !important; } .ux4g-radius-tr-m { border-top-right-radius: var(--ux4g-radius-md) !important; } .ux4g-radius-bl-m { border-bottom-left-radius: var(--ux4g-radius-md) !important; } .ux4g-radius-br-m { border-bottom-right-radius: var(--ux4g-radius-md) !important; } .ux4g-radius-tl-l { border-top-left-radius: var(--ux4g-radius-lg) !important; } .ux4g-radius-tr-l { border-top-right-radius: var(--ux4g-radius-lg) !important; } .ux4g-radius-bl-l { border-bottom-left-radius: var(--ux4g-radius-lg) !important; } .ux4g-radius-br-l { border-bottom-right-radius: var(--ux4g-radius-lg) !important; } .ux4g-radius-tl-full {border-top-left-radius: var(--ux4g-radius-full) !important;} .ux4g-radius-tr-full {border-top-right-radius: var(--ux4g-radius-full) !important;} .ux4g-radius-bl-full {border-bottom-left-radius: var(--ux4g-radius-full) !important;} .ux4g-radius-br-full {border-bottom-right-radius: var(--ux4g-radius-full) !important;} ``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.