Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Border

  • Additive
  • Subtractive
  • Border Color
    • Sass API
  • Rounded
  • Rounded Sizes

Additive

Utility Example
border
100x100
border-top
100x100
border-right
100x100
border-bottom
100x100
border-left
100x100
Copied!
Code Sample (expand to see it)
<div class="border"></div>
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>

Subtractive

Utility Example
border-0
100x100
border-top-0
100x100
border-right-0
100x100
border-bottom-0
100x100
border-left-0
100x100
Copied!
Code Sample (expand to see it)
<div class="border-0"></div>
<div class="border-top-0"></div>
<div class="border-right-0"></div>
<div class="border-bottom-0"></div>
<div class="border-left-0"></div>

Border Color

Utility Example
border-primary
100x100
border-secondary
100x100
border-success
100x100
border-info
100x100
border-warning
100x100
border-danger
100x100
border-dark
100x100
border-light
100x100
Copied!
Code Sample (expand to see it)
<div class="border border-primary"></div>
<div class="border border-secondary"></div>
<div class="border border-success"></div>
<div class="border border-info"></div>
<div class="border border-warning"></div>
<div class="border border-danger"></div>
<div class="border border-dark"></div>
<div class="border border-light"></div>

Border Color Sass API

The map $border-theme-colors allows generating any number of border variants. If a key starts with ., # or %, Clay will output it as is, otherwise we will prepend .border- to the key (e.g., .border-primary).

Copied!
Code Sample (expand to see it)
$border-theme-colors: (
    'primary': (
        border-color: $primary !important,
    ),
    '%b-tertiary': (
        border-color: green !important,
    ),
    '.b-tertiary': (
        extend: '%border-tertiary',
    ),
    '.b-quaternary': (
        extend: '%border-tertiary',
    ),
);

Outputs:

Copied!
Code Sample (expand to see it)
.border-primary {
    border-color: #0b5fff !important;
}

.b-tertiary, .b-quaternary {
    border-color: green !important;
}

Rounded

These are border-radius utility classes.

Utility Example
rounded
100x100
rounded-top
100x100
rounded-right
100x100
rounded-bottom
100x100
rounded-left
100x100
rounded-circle
100x100
rounded-pill
150x100
rounded-0
100x100
Copied!
Code Sample (expand to see it)
<div class="rounded"></div>
<div class="rounded-top"></div>
<div class="rounded-right"></div>
<div class="rounded-bottom"></div>
<div class="rounded-left"></div>
<div class="rounded-circle"></div>
<div class="rounded-pill"></div>
<div class="rounded-0"></div>

Rounded Sizes

Utility Example
rounded-sm
100x100
rounded-lg
100x100
Copied!
Code Sample (expand to see it)
<div class="rounded-sm"></div>
<div class="rounded-lg"></div>

How can this be improved? Create an issue!