FrankUICommon CSS (Spacing & Position Utilities)
FrankUI provides utility helper classes for rapid layout adjustments, positioning elements, and spacing. These utilities form the foundation for more advanced responsive interfaces.
Border Utilities
FrankUI includes lightweight border helpers to quickly apply borders, styles, colors, thicknesses, and rounded corners without custom styling rules.
Live Border Sandbox
Customize the border classes on the target element below to see how they render in real-time.
Target Box
Classes: border border-solid border-size-1 bd-primary
Borders Reference
| Class Name | Applied Style | Description |
|---|---|---|
| .border | border: 1px solid var(--secondary-color) !important; | Adds a border on all sides |
| .border-top | border-top: 1px solid var(--secondary-color) !important; | Adds a top border |
| .border-right | border-right: 1px solid var(--secondary-color) !important; | Adds a right border |
| .border-bottom | border-bottom: 1px solid var(--secondary-color) !important; | Adds a bottom border |
| .border-left | border-left: 1px solid var(--secondary-color) !important; | Adds a left border |
| .border-solid .border-dashed .border-dotted | border-style: solid !important; border-style: dashed !important; border-style: dotted !important; | Controls the border drawing style |
| .border-size-1 ... 20 | border-width: [level]px !important; | Sets border thickness (1px to 20px) |
| .border-radius-1 ... 20 | border-radius: [level]px !important; | Sets border roundedness (1px to 20px) |
| .rounded | border-radius: 4px !important; | Applies default rounded corner |
| .to-cycle | border-radius: 50% !important; | Transforms block into a circle/oval |
| .bd-primary .bd-success .bd-alert | border-color: var(--primary-color) !important; border-color: var(--success-color) !important; border-color: var(--alert-color) !important; | Sets border color mapping to framework theme variables |
Removing Borders (Responsive Variants)
Borders can be removed globally or per direction. You can also hide borders selectively starting at any breakpoint (e.g. .border-none-md, .border-top-none-lg):
| Class Pattern | Description |
|---|---|
| .border-none | Removes all borders |
| .border-[direction]-none | Removes border on specific side (top, right, bottom, left) |
| .border-none-{breakpoint} | Removes all borders at breakpoint and above (xs, sm, md, lg, xl, xxl, xxxl) |
| .border-[direction]-none-{breakpoint} | Removes border on side starting at breakpoint and above |
Border Markup Code Example
<!-- Div with 3px dashed primary color border and custom rounded corners -->
<div class="border border-dashed border-size-3 border-radius-8 bd-primary p-4">
<p>Custom styled container</p>
</div>
<!-- Button circular with solid success color border -->
<button class="border border-solid border-size-2 to-cycle bd-success">
✏️
</button>