Base Reset Base Typography Base Forms Base Buttons Base Tables Utility Layout Utility Typography Utility White Space Utility Responsive States UI Utility Button Sizes UI Utility Groups UI Utility Disclosure States Positions Grid Table Object Color Base Color Forms Color Forms Dark Color Tables Color Buttons Colors Color Borders Flex Object Utility Headings Background Images

# basscss-color-borders v0.0.2

# Color Borders

NPM Github

basscss.com

.border
.border-top
.border-right
.border-bottom
.border-left

    <div class="p1 m1 border bg-lighter-gray">.border</div>
    <div class="p1 m1 border-top bg-lighter-gray">.border-top</div>
    <div class="p1 m1 border-right bg-lighter-gray">.border-right</div>
    <div class="p1 m1 border-bottom bg-lighter-gray">.border-bottom</div>
    <div class="p1 m1 border-left bg-lighter-gray">.border-left</div>

Utility styles for border radii can be used to style images and other elements.

    <img src="/docs/placeholder-square.svg" class="rounded" width="64" height="64" />
    <img src="/docs/placeholder-square.svg" class="circle" width="64" height="64" />
    <img src="/docs/placeholder-square.svg" class="rounded-top" width="64" height="64" />
    <img src="/docs/placeholder-square.svg" class="rounded-right" width="64" height="64" />
    <img src="/docs/placeholder-square.svg" class="rounded-bottom" width="64" height="64" />
    <img src="/docs/placeholder-square.svg" class="rounded-left" width="64" height="64" />

The `.not-rounded` utility can be used to override default radii. This is useful for things like input and button groups.

    <button class="button-blue not-rounded">Not Rounded</button>