Borders
The Border Utilities extend Bootstrap by adding precise control over border width, style, and radius using Sass-powered utilities — fully RTL and LTR aware.
All classes use the al- prefix and follow utility-first conventions.
Overview
| Utility Type | Class Format | Description |
|---|---|---|
| Border Width | .al-border-{value} | Border width (px) |
| Border Style | .al-border-{style} | Border style: dotted, double |
| Border Radius | .al-rounded-{value} | Border radius (px) |
| Radius Top/Bottom | .al-rounded-top-{value} / .al-rounded-bottom-{value} | Top or bottom corners |
| Radius Start/End | .al-rounded-start-{value} / .al-rounded-end-{value} | Logical corners (RTL safe) |
| Sub-corner Start/End | .al-rounded-start-top-{value} ... | Individual logical corners |
| Outline Size | .al-outline-{value} | Outline width in px |
| Outline Offset | .al-outline-offset-{value} | Outline offset in px |
| Outline Color | .al-outline-{color} | Solid color outline |
| Outline Opacity | .al-outline-{color}-{opacity} | RGBA color outline |
| Outline Style | .al-outline-{style} | Outline style type |
Sass Reference
assets/scss/_borders.scss
Copy
Class Usage Reference
| Class | Output |
|---|---|
| .al-border-3 | --bs-border-width: 3px |
| .al-border-dotted | --bs-border-style: dotted |
| .al-border-double | --bs-border-style: double |
| .al-rounded-12 | border-radius: 12px |
| .al-rounded-top-32 | Top radius 32px |
| .al-rounded-bottom-16 | Bottom radius 16px |
| .al-rounded-start-20 | Start radius 20px |
| .al-rounded-end-20 | End radius 20px |
| .al-rounded-start-top-20 | Start top radius 20px |
| .al-rounded-end-top-20 | End top radius 20px |
| .al-rounded-start-bottom-20 | Start bottom radius 20px |
| .al-rounded-end-bottom-20 | End radius bottom 20px |
| .al-outline | outline: 1px solid |
| .al-outline-5 | outline-width: 5px |
| .al-outline-offset-3 | outline-offset: 3px |
| .al-outline-primary | outline-color: var(--bs-primary) |
| .al-outline-danger-50 | rgba(var(--bs-danger-rgb), 0.5) |
| .al-outline-dashed | outline-style: dashed |
Border Examples
Border Width
Border 1px
Border 2px
Border 3px
Border 4px
Border 5px
Border 6px
Border 7px
Border 8px
Border 9px
Border 10px
Copy
Border 1px
Border 2px
Border 3px
Border 4px
Border 5px
Border 6px
Border 7px
Border 8px
Border 9px
Border 10px
Border Style
Border Solid
Border Dotted
Border Dotted
Copy
Border Solid
Border Dotted
Border Dotted
Border Radius Examples
Radius 2px
Radius 3px
Radius 4px
Radius 5px
Radius 6px
Radius 8px
Radius 10px
Radius 12px
Radius 15px
Radius 16px
Radius 24px
Radius 32px
Radius 48px
Radius 64px
Border Radius - Top / Bottom / Start / End
Radius Top 20px
Radius Bottom 20px
Radius Start 20px
Radius End 20px
Border Radius - Start Top / Start Bottom / End Top / End Bottom
Radius Start Top 20px
Radius Start Bottom 20px
Radius End Top 20px
Radius End Bottom 20px
Copy
Radius 2px
Radius 3px
Radius 4px
Radius 5px
Radius 6px
Radius 8px
Radius 10px
Radius 12px
Radius 15px
Radius 16px
Radius 24px
Radius 32px
Radius 48px
Radius 64px
// Border Radius - Top / Bottom / Start / End
Radius Top 20px
Radius Bottom 20px
Radius Start 20px
Radius End 20px
// Border Radius - Start Top / Start Bottom / End Top / End Bottom
Radius Start Top 20px
Radius Start Bottom 20px
Radius End Top 20px
Radius End Bottom 20px
Outline Examples
Basic Outline
Outline
Copy
Outline
Outline Width
Outline 1px
Outline 2px
Outline 3px
Outline 4px
Outline 5px
Outline 6px
Outline 7px
Outline 8px
Outline 9px
Outline 10px
Copy
Outline 1px
Outline 2px
Outline 3px
Outline 4px
Outline 5px
Outline 6px
Outline 7px
Outline 8px
Outline 9px
Outline 10px
Outline Offset
Offset 1px
Offset 2px
Offset 3px
Offset 4px
Offset 5px
Offset 6px
Offset 7px
Offset 8px
Offset 9px
Offset 10px
Copy
Offset 1px
Offset 2px
Offset 3px
Offset 4px
Offset 5px
Offset 6px
Offset 7px
Offset 8px
Offset 9px
Offset 10px
Outline Color
Primary
Secondary
Success
Warning
Danger
Info
White
Black
Outline Color with Opacity
Opacity 10
Opacity 25
Opacity 50
Opacity 75
Copy
Primary
Secondary
Success
Warning
Danger
Info
White
Black
Opacity 10
Opacity 25
Opacity 50
Opacity 75
Outline Style
Outline Dotted
Outline Dashed
Outline Double
Copy
Outline Dotted
Outline Dashed
Outline Double
Developer Notes
-
Border width fully controlled via $border-size Sass map
-
Border radius fully controlled via $radius-size Sass map
-
Fully LTR/RTL aware via logical start and end utilities
-
Border style uses native Bootstrap CSS variable --bs-border-style
-
Border width uses native Bootstrap CSS variable --bs-border-width
-
Outline size controlled from $outline-size map
-
Opacity fully supported via $outline-opacity map
-
Fully integrates with Bootstrap color variables
-
Style utilities cover: solid, dotted, dashed, double
-
Border-width overrides use CSS variable --bs-border-width
-
Border-style overrides use CSS variable --bs-border-style
-
Can be combined seamlessly with all existing Bootstrap classes