Border

Controls borders and border radii.

The borders are colored using the default border color of the browser, usually black. Use border-color to change the line colors.

Basically a clone of basscss/border, see http://basscss.com/#basscss-border for details.

$border-radius

scss

$border-radius: 3px !default;

Sets the default radius when border-radius is applied to an element.

Used By

@mixin rounded()

@mixin rounded-top()

@mixin rounded-right()

@mixin rounded-bottom()

@mixin rounded-left()

$border-width

scss

$border-width: 1px !default;

Sets the default width of borders applied with Core

Used By

@mixin border()

@mixin border-top()

@mixin border-right()

@mixin border-bottom()

@mixin border-left()

@mixin border()

Puts a border around the element.

Examples

scss

.border.example {
  @extend @border;
}

html

<div class="border example">My Element</div>

Requires

$border-width

@mixin border-top()

Puts a border on top of the element.

Requires

$border-width

@mixin border-right()

Puts a border to the right of the element.

Requires

$border-width

@mixin border-bottom()

Puts a border on the bottom of the element.

Requires

$border-width

@mixin border-left()

Puts a border to the left of the element.

Requires

$border-width

@mixin border-none()

Removes all borders

@mixin rounded()

Rounds all corners of the element

Examples

scss

.rounded.example {
  @extend @rounded;
}

html

<div class="rounded example">My Element</div>

Requires

$border-radius

@mixin circle()

Makes the element circular, if it’s square, or elliptical if it’s rectangular.

@mixin rounded-top()

Rounds the two top corners of the element.

Requires

$border-radius

@mixin rounded-right()

Rounds the two right corners of the element.

Requires

$border-radius

@mixin rounded-bottom()

Rounds the two bottom corners of the element.

Requires

$border-radius

@mixin rounded-left()

Rounds the two left corners of the element.

Requires

$border-radius

@mixin not-rounded()

Removes rounded corners from the element.