KSS Style Guide

1 #Border Border

Classes for setting the border an element.

Source: dist/full/full.css, line 44

1.1 #Border - Radius Border Radius

Classes for setting the border radius of an element.

Source: dist/full/full.css, line 497

1.1.1 #Border - Radius - Circle .br*-c

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border radius of an element to 50%

Examples
Default styling
A div
.bra-c
Sets border radius for all corners to 50%
A div
.brt-c
Sets border radius for top corners to 50%
A div
.brr-c
Sets border radius for right corners to 50%
A div
.brb-c
Sets border radius for bottom corners to 50%
A div
.brl-c
Sets border radius for left corners to 50%
A div
.brtl-c
Sets border radius for top left corner to 50%
A div
.brtr-c
Sets border radius for top right corner to 50%
A div
.brbr-c
Sets border radius for bottom right corner to 50%
A div
.brbl-c
Sets border radius for bottom left corners to 50%
A div
Markup 
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 504

1.1.1 #Border - Radius - Circle .br*-0

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border style of an element to 0

Examples
Default styling
A div
.bra-0
Sets border radius for all corners to 0
A div
.brt-0
Sets border radius for top corners to 0
A div
.brr-0
Sets border radius for right corners to 0
A div
.brb-0
Sets border radius for bottom corners to 0
A div
.brl-0
Sets border radius for left corners to 0
A div
.brtl-0
Sets border radius for top left corner to 0
A div
.brtr-0
Sets border radius for top right corner to 0
A div
.brbr-0
Sets border radius for bottom right corner to 0
A div
.brbl-0
Sets border radius for bottom left corners to 0
A div
Markup 
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 552

1.1.1 #Border - Radius - Circle .br*-1

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border style of an element to 1

Examples
Default styling
A div
.bra-1
Sets border radius for all corners to 1
A div
.brt-1
Sets border radius for top corners to 1
A div
.brr-1
Sets border radius for right corners to 1
A div
.brb-1
Sets border radius for bottom corners to 1
A div
.brl-1
Sets border radius for left corners to 1
A div
.brtl-1
Sets border radius for top left corner to 1
A div
.brtr-1
Sets border radius for top right corner to 1
A div
.brbr-1
Sets border radius for bottom right corner to 1
A div
.brbl-1
Sets border radius for bottom left corners to 1
A div
Markup 
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 600

1.1.1 #Border - Radius - Circle .br*-2

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border style of an element to 2

Examples
Default styling
A div
.bra-2
Sets border radius for all corners to 2
A div
.brt-2
Sets border radius for top corners to 2
A div
.brr-2
Sets border radius for right corners to 2
A div
.brb-2
Sets border radius for bottom corners to 2
A div
.brl-2
Sets border radius for left corners to 2
A div
.brtl-2
Sets border radius for top left corner to 2
A div
.brtr-2
Sets border radius for top right corner to 2
A div
.brbr-2
Sets border radius for bottom right corner to 2
A div
.brbl-2
Sets border radius for bottom left corners to 2
A div
Markup 
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 648

1.1.1 #Border - Radius - Circle .br*-3

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border style of an element to 3

Examples
Default styling
A div
.bra-3
Sets border radius for all corners to 3
A div
.brt-3
Sets border radius for top corners to 3
A div
.brr-3
Sets border radius for right corners to 3
A div
.brb-3
Sets border radius for bottom corners to 3
A div
.brl-3
Sets border radius for left corners to 3
A div
.brtl-3
Sets border radius for top left corner to 3
A div
.brtr-3
Sets border radius for top right corner to 3
A div
.brbr-3
Sets border radius for bottom right corner to 3
A div
.brbl-3
Sets border radius for bottom left corners to 3
A div
Markup 
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 696

1.2 #Border - Style Border Style

Classes for setting the border style of an element.

Source: dist/full/full.css, line 426

1.2.1 #Border - Style - base .ct-base

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color).

Examples
Default styling
A div
.ct-base
Sets color, background, and border-color
A div
.cf-base
Sets color to var(--cf-base)
A div
.cb-base
Sets background to var(--cb-base)
A div
.ce-base
Sets border-color to var(--ce-base)
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 820

1.2.2 #Border - Style - dashed .bs-dashed

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border style of an element to dashed

Examples
Default styling
A div
.bs-dashed
Sets border-style to dashed
A div
Markup 
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 465

1.2.3 #Border - Style - disabled .ct-disabled

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color).

Examples
Default styling
A div
.ct-disabled
Sets color, background, and border-color
A div
.cf-disabled
Sets color to var(--cf-disabled)
A div
.cb-disabled
Sets background to var(--cb-disabled)
A div
.ce-disabled
Sets border-color to var(--ce-disabled)
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 1093

1.2.3.1 #Border - Style - disabled - disabled .ct-disabled-on-disabled

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color) on disabled.

Examples
Default styling
A div
.ct-disabled-on-disabled
Sets color, background, and border-color on disabled
A div
.cf-disabled-on-disabled
Sets color to var(--cf-disabled) on disabled
A div
.cb-disabled-on-disabled
Sets background to var(--cb-disabled) on disabled
A div
.ce-disabled-on-disabled
Sets border-color to var(--ce-disabled) on disabled
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 1114

1.2.4 #Border - Style - dotted .bs-dotted

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border style of an element to dotted

Examples
Default styling
A div
.bs-dotted
Sets border-style to dotted
A div
Markup 
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 449

1.2.5 #Border - Style - error .ct-error

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color).

Examples
Default styling
A div
.ct-error
Sets color, background, and border-color
A div
.cf-error
Sets color to var(--cf-error)
A div
.cb-error
Sets background to var(--cb-error)
A div
.ce-error
Sets border-color to var(--ce-error)
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 1051

1.2.5.1 #Border - Style - error - invalid .ct-error-on-invalid

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color) on invalid.

Examples
Default styling
A div
.ct-error-on-invalid
Sets color, background, and border-color on invalid
A div
.cf-error-on-invalid
Sets color to var(--cf-error) on invalid
A div
.cb-error-on-invalid
Sets background to var(--cb-error) on invalid
A div
.ce-error-on-invalid
Sets border-color to var(--ce-error) on invalid
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 1072

1.2.6 #Border - Style - focus .ct-focus

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color).

Examples
Default styling
A div
.ct-focus
Sets color, background, and border-color
A div
.cf-focus
Sets color to var(--cf-focus)
A div
.cb-focus
Sets background to var(--cb-focus)
A div
.ce-focus
Sets border-color to var(--ce-focus)
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 946

1.2.6.1 #Border - Style - focus - focus, focus-within .ct-focus-on-focus

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color) on focus.

Examples
Default styling
A div
.ct-focus-on-focus
Sets color, background, and border-color on focus
A div
.cf-focus-on-focus
Sets color to var(--cf-focus) on focus
A div
.cb-focus-on-focus
Sets background to var(--cb-focus) on focus
A div
.ce-focus-on-focus
Sets border-color to var(--ce-focus) on focus
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 967

1.2.6.1 #Border - Style - focus - focus, focus-within .ct-focus-on-focus-within

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color) on focus-within.

Examples
Default styling
A div
.ct-focus-on-focus-within
Sets color, background, and border-color on focus-within
A div
.cf-focus-on-focus-within
Sets color to var(--cf-focus) on focus-within
A div
.cb-focus-on-focus-within
Sets background to var(--cb-focus) on focus-within
A div
.ce-focus-on-focus-within
Sets border-color to var(--ce-focus) on focus-within
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 988

1.2.7 #Border - Style - link .ct-link

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color).

Examples
Default styling
A div
.ct-link
Sets color, background, and border-color
A div
.cf-link
Sets color to var(--cf-link)
A div
.cb-link
Sets background to var(--cb-link)
A div
.ce-link
Sets border-color to var(--ce-link)
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 883

1.2.8 #Border - Style - none .bs-none

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border style of an element to none

Examples
Default styling
A div
.bs-none
Sets border-style to none
A div
Markup 
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 433

1.2.9 #Border - Style - primary .ct-primary

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color).

Examples
Default styling
A div
.ct-primary
Sets color, background, and border-color
A div
.cf-primary
Sets color to var(--cf-primary)
A div
.cb-primary
Sets background to var(--cb-primary)
A div
.ce-primary
Sets border-color to var(--ce-primary)
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 841

1.2.10 #Border - Style - required .ct-required

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color).

Examples
Default styling
A div
.ct-required
Sets color, background, and border-color
A div
.cf-required
Sets color to var(--cf-required)
A div
.cb-required
Sets background to var(--cb-required)
A div
.ce-required
Sets border-color to var(--ce-required)
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 1009

1.2.10.1 #Border - Style - required - required .ct-required-on-required

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color) on required.

Examples
Default styling
A div
.ct-required-on-required
Sets color, background, and border-color on required
A div
.cf-required-on-required
Sets color to var(--cf-required) on required
A div
.cb-required-on-required
Sets background to var(--cb-required) on required
A div
.ce-required-on-required
Sets border-color to var(--ce-required) on required
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 1030

1.2.11 #Border - Style - secondary .ct-secondary

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color).

Examples
Default styling
A div
.ct-secondary
Sets color, background, and border-color
A div
.cf-secondary
Sets color to var(--cf-secondary)
A div
.cb-secondary
Sets background to var(--cb-secondary)
A div
.ce-secondary
Sets border-color to var(--ce-secondary)
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 862

1.2.12 #Border - Style - solid .bs-solid

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border style of an element to solid

Examples
Default styling
A div
.bs-solid
Sets border-style to solid
A div
Markup 
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 481

1.2.13 #Border - Style - visited .ct-visited

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color).

Examples
Default styling
A div
.ct-visited
Sets color, background, and border-color
A div
.cf-visited
Sets color to var(--cf-visited)
A div
.cb-visited
Sets background to var(--cb-visited)
A div
.ce-visited
Sets border-color to var(--ce-visited)
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 904

1.2.13.1 #Border - Style - visited - visited .ct-visited-on-visited

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the color theme of an element (color, background, border-color) on visited.

Examples
Default styling
A div
.ct-visited-on-visited
Sets color, background, and border-color on visited
A div
.cf-visited-on-visited
Sets color to var(--cf-visited) on visited
A div
.cb-visited-on-visited
Sets background to var(--cb-visited) on visited
A div
.ce-visited-on-visited
Sets border-color to var(--ce-visited) on visited
A div
Markup 
<div class="bwa-1 pwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 925

1.3 #Border - Width Border Width

Classes for setting the border width of an element.

Source: dist/full/full.css, line 51

1.3.1 #Border - Width - 0 .bw*-0

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border of element to css var for 0.

Examples
Default styling
A div
.bwa-0
Sets all borders to 0
A div
.bwx-0
Sets left and right borders to 0
A div
.bwy-0
Sets top and bottom borders to 0
A div
.bwt-0
Sets top border to 0
A div
.bwr-0
Sets right border to 0
A div
.bwb-0
Sets bottom border to 0
A div
.bwl-0
Sets left border to 0
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/full/full.css, line 58

1.3.2 #Border - Width - 1 .bw*-1

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border of element to css var for 1.

Examples
Default styling
A div
.bwa-1
Sets all borders to 1
A div
.bwx-1
Sets left and right borders to 1
A div
.bwy-1
Sets top and bottom borders to 1
A div
.bwt-1
Sets top border to 1
A div
.bwr-1
Sets right border to 1
A div
.bwb-1
Sets bottom border to 1
A div
.bwl-1
Sets left border to 1
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/full/full.css, line 104

1.3.3 #Border - Width - 2 .bw*-2

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border of element to css var for 2.

Examples
Default styling
A div
.bwa-2
Sets all borders to 2
A div
.bwx-2
Sets left and right borders to 2
A div
.bwy-2
Sets top and bottom borders to 2
A div
.bwt-2
Sets top border to 2
A div
.bwr-2
Sets right border to 2
A div
.bwb-2
Sets bottom border to 2
A div
.bwl-2
Sets left border to 2
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/full/full.css, line 150

1.3.4 #Border - Width - 3 .bw*-3

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border of element to css var for 3.

Examples
Default styling
A div
.bwa-3
Sets all borders to 3
A div
.bwx-3
Sets left and right borders to 3
A div
.bwy-3
Sets top and bottom borders to 3
A div
.bwt-3
Sets top border to 3
A div
.bwr-3
Sets right border to 3
A div
.bwb-3
Sets bottom border to 3
A div
.bwl-3
Sets left border to 3
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/full/full.css, line 196

1.3.5 #Border - Width - 4 .bw*-4

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border of element to css var for 4.

Examples
Default styling
A div
.bwa-4
Sets all borders to 4
A div
.bwx-4
Sets left and right borders to 4
A div
.bwy-4
Sets top and bottom borders to 4
A div
.bwt-4
Sets top border to 4
A div
.bwr-4
Sets right border to 4
A div
.bwb-4
Sets bottom border to 4
A div
.bwl-4
Sets left border to 4
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/full/full.css, line 242

1.3.6 #Border - Width - 5 .bw*-5

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border of element to css var for 5.

Examples
Default styling
A div
.bwa-5
Sets all borders to 5
A div
.bwx-5
Sets left and right borders to 5
A div
.bwy-5
Sets top and bottom borders to 5
A div
.bwt-5
Sets top border to 5
A div
.bwr-5
Sets right border to 5
A div
.bwb-5
Sets bottom border to 5
A div
.bwl-5
Sets left border to 5
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/full/full.css, line 288

1.3.7 #Border - Width - 6 .bw*-6

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border of element to css var for 6.

Examples
Default styling
A div
.bwa-6
Sets all borders to 6
A div
.bwx-6
Sets left and right borders to 6
A div
.bwy-6
Sets top and bottom borders to 6
A div
.bwt-6
Sets top border to 6
A div
.bwr-6
Sets right border to 6
A div
.bwb-6
Sets bottom border to 6
A div
.bwl-6
Sets left border to 6
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/full/full.css, line 334

1.3.8 #Border - Width - 7 .bw*-7

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the border of element to css var for 7.

Examples
Default styling
A div
.bwa-7
Sets all borders to 7
A div
.bwx-7
Sets left and right borders to 7
A div
.bwy-7
Sets top and bottom borders to 7
A div
.bwt-7
Sets top border to 7
A div
.bwr-7
Sets right border to 7
A div
.bwb-7
Sets bottom border to 7
A div
.bwl-7
Sets left border to 7
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/full/full.css, line 380