border-right
Sets the right border. Remove with brn or specify width+style+color with shorthand.
Class List
| Class | CSS | Description |
|---|---|---|
brn | border-right: 0 | Remove right border |
br1pxsolid27272A | border-right: 1px solid #27272A | 1px dark solid (separator) |
br1pxsolidDDDDDD | border-right: 1px solid #DDDDDD | 1px light gray solid |
br2pxsolid6366F1 | border-right: 2px solid #6366F1 | 2px indigo solid |
Naming Caution
brn = border-right: 0 (not border-radius!)
brn is border-right: 0. br0 is border-radius: 0. Do not confuse.
| Class | CSS | Distinction |
|---|---|---|
brn | border-right: 0 | Remove right border |
br0 | border-radius: 0 | border-radius reset |
br4px | border-radius: 4px | border-radius (with unit) |
br8px | border-radius: 8px | border-radius (with unit) |
br1pxsolid27272A | border-right: 1px solid #27272A | border-right shorthand (number+unit+style+color) |
Shorthand Pattern
br{크기}{단위}{스타일}{HEX6}border-right shorthand: b + direction (r) + size + unit + style + color. Note: br + unit = border-radius.
Visual Comparison
Visually compares border-right classes.
brn (remove) — brn
Content area
1px solid dark — br1pxsolid27272A
Content area
2px solid indigo — br2pxsolid6366F1
Content area
Usage Examples
<!-- Sidebar divider -->
<div class="dg gtc25rem-1fr">
<aside class="br1pxsolid27272A p2rem">Sidebar</aside>
<main class="p2rem">Main Content</main>
</div>
<!-- Horizontal list separator -->
<div class="df aic">
<span class="br1pxsolid27272A pr16px">Item A</span>
<span class="br1pxsolid27272A px16px">Item B</span>
<span class="pl16px">Item C</span>
</div>
<!-- Remove right border -->
<td class="brn">Cell without right border</td>Practical Patterns
Sidebar + main separation
sidebar
Separated by right border
Main content
Content area
Horizontal item separation
Responsive
Control right border by screen size with media query prefixes.
<!-- Desktop: right divider → Mobile: bottom divider -->
<aside class="br1pxsolid27272A sm-brn sm-bb1pxsolid27272A p2rem">
Sidebar
</aside>
<!-- Remove right border on mobile -->
<div class="br1pxsolid27272A sm-brn">
Right border removed below 768px
</div>Tips & Notes
brn is border-right: 0
brn is border-right: 0. br0 is border-radius: 0.
Use for sidebar separation
Use right border to visually separate sidebar and main content in grid layouts.
responsive direction transition
On desktop, br1pxsolid27272A for right separation. On mobile, switch to sm-brn sm-bb1pxsolid27272A for bottom separation.