# Borders Utilities for controlling the border width, style, and color of an element. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-borders--introduction ## Variants documented in Storybook - BorderShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-borders--bordershowcase ## 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 Borders. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Border Showcase — Border Base HTML: ```html
...
...
...
``` React: ```jsx import React from 'react'; const BordersExample1Demo = () => ( <> {/* ux4g-border: Solid default border */}
...
{/* ux4g-border-bold: Solid Bold border */}
...
{/* ux4g-border-none: Removes any existing border width */}
...
); export default BordersExample1Demo; ``` Angular: ```html
...
...
...
``` ### 2. Border Showcase — Border Styles HTML: ```html
...
...
...
...
``` React: ```jsx import React from 'react'; const BordersExample2Demo = () => ( <> {/* ux4g-border-dashed: Dashed border style */}
...
{/* ux4g-border-dotted: Dotted border style */}
...
{/* Combined width + style */}
...
...
); export default BordersExample2Demo; ``` Angular: ```html
...
...
...
...
``` ### 3. Border Showcase — Side-Specific Borders HTML: ```html
...
...
...
...
``` React: ```jsx import React from 'react'; const BordersExample3Demo = () => ( <> {/* ux4g-bt: Border Top */}
...
{/* ux4g-br: Border Right (Inline End) */}
...
{/* ux4g-bb: Border Bottom */}
...
{/* ux4g-bl: Border Left (Inline Start) */}
...
); export default BordersExample3Demo; ``` Angular: ```html
...
...
...
...
``` ### 4. Border Showcase — Combination & Resets HTML: ```html
...
...
...
...
``` React: ```jsx import React from 'react'; const BordersExample4Demo = () => ( <> {/* ux4g-bt-0: Border Top Reset */}
...
{/* ux4g-bb-0: Border Bottom Reset */}
...
{/* Combined Sides */}
...
...
); export default BordersExample4Demo; ``` Angular: ```html
...
...
...
...
``` ### 5. Border Showcase — Semantic Colors HTML: ```html
...
...
...
...
``` React: ```jsx import React from 'react'; const BordersExample5Demo = () => ( <>
...
...
...
...
); export default BordersExample5Demo; ``` Angular: ```html
...
...
...
...
``` ### 6. Introduction — Introduction HTML: ```html
Utilities

Border Utilities Reference

A complete reference of all border utility classes, built on a modular engine supporting widths, individual sides, and semantic colors.

Comprehensive CSS Class Reference

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

Engine & Width

Border ux4g-border
Border Bold ux4g-border-bold
Border None ux4g-border-none

Border Styles

Border Dashed ux4g-border-dashed
Border Dotted ux4g-border-dotted

Side Utilities

Border Top ux4g-bt
Border Right ux4g-br
Border Bottom ux4g-bb
Border Left ux4g-bl

Atomic Resets (0 width)

Border Top 0 ux4g-bt-0
Border Right 0 ux4g-br-0
Border Bottom 0 ux4g-bb-0
Border Left 0 ux4g-bl-0

Semantic Color Tokens

Border Neutral Subtle
ux4g-border-neutral-subtle
Border Neutral Strong
ux4g-border-neutral-strong
Border Primary
ux4g-border-primary
Border Primary Strong
ux4g-border-primary-strong
Border Secondary
ux4g-border-secondary
Border Tertiary
ux4g-border-tertiary
Border Success
ux4g-border-success
Border Success Strong
ux4g-border-success-strong
Border Info
ux4g-border-info
Border Info Strong
ux4g-border-info-strong
Border Error
ux4g-border-error
Border Error Strong
ux4g-border-error-strong
Border Warning
ux4g-border-warning
Border Warning Strong
ux4g-border-warning-strong
Border Neutral Elevated
ux4g-border-neutral-elevated
``` React: ```jsx import React from 'react'; const BordersExample6Demo = () => ( <>
Utilities

Border Utilities Reference

A complete reference of all border utility classes, built on a modular engine supporting widths, individual sides, and semantic colors.

Comprehensive CSS Class Reference

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

{/* Engine & Width */}

Engine & Width

Border ux4g-border
Border Bold ux4g-border-bold
Border None ux4g-border-none
{/* Border Styles */}

Border Styles

Border Dashed ux4g-border-dashed
Border Dotted ux4g-border-dotted
{/* Individual Sides (RTL Safe) */}

Side Utilities

Border Top ux4g-bt
Border Right ux4g-br
Border Bottom ux4g-bb
Border Left ux4g-bl
{/* Atomic Resets */}

Atomic Resets (0 width)

Border Top 0 ux4g-bt-0
Border Right 0 ux4g-br-0
Border Bottom 0 ux4g-bb-0
Border Left 0 ux4g-bl-0
{/* Semantic Colors */}

Semantic Color Tokens

Border Neutral Subtle
ux4g-border-neutral-subtle
Border Neutral Strong
ux4g-border-neutral-strong
Border Primary
ux4g-border-primary
Border Primary Strong
ux4g-border-primary-strong
Border Secondary
ux4g-border-secondary
Border Tertiary
ux4g-border-tertiary
Border Success
ux4g-border-success
Border Success Strong
ux4g-border-success-strong
Border Info
ux4g-border-info
Border Info Strong
ux4g-border-info-strong
Border Error
ux4g-border-error
Border Error Strong
ux4g-border-error-strong
Border Warning
ux4g-border-warning
Border Warning Strong
ux4g-border-warning-strong
Border Neutral Elevated
ux4g-border-neutral-elevated
); export default BordersExample6Demo; ``` Angular: ```html
Utilities

Border Utilities Reference

A complete reference of all border utility classes, built on a modular engine supporting widths, individual sides, and semantic colors.

Comprehensive CSS Class Reference

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

Engine & Width

Border ux4g-border
Border Bold ux4g-border-bold
Border None ux4g-border-none

Border Styles

Border Dashed ux4g-border-dashed
Border Dotted ux4g-border-dotted

Side Utilities

Border Top ux4g-bt
Border Right ux4g-br
Border Bottom ux4g-bb
Border Left ux4g-bl

Atomic Resets (0 width)

Border Top 0 ux4g-bt-0
Border Right 0 ux4g-br-0
Border Bottom 0 ux4g-bb-0
Border Left 0 ux4g-bl-0

Semantic Color Tokens

Border Neutral Subtle
ux4g-border-neutral-subtle
Border Neutral Strong
ux4g-border-neutral-strong
Border Primary
ux4g-border-primary
Border Primary Strong
ux4g-border-primary-strong
Border Secondary
ux4g-border-secondary
Border Tertiary
ux4g-border-tertiary
Border Success
ux4g-border-success
Border Success Strong
ux4g-border-success-strong
Border Info
ux4g-border-info
Border Info Strong
ux4g-border-info-strong
Border Error
ux4g-border-error
Border Error Strong
ux4g-border-error-strong
Border Warning
ux4g-border-warning
Border Warning Strong
ux4g-border-warning-strong
Border Neutral Elevated
ux4g-border-neutral-elevated
``` ## 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.