Borders

Utilities for adding borders to components.


Default/Solid border

Dashed border

Dotted border

<div class="g-1_3 box m-bottom-4 border">
		<p>Default/Solid border</p>
</div>

<div class="g-1_3 box m-bottom-4 border border-dashed">
		<p>Dashed border</p>
</div>

<div class="g-1_3 g-omega box m-bottom-4 border border-dotted">
		<p>Dotted border</p>
</div>

Top border

Bottom border

Left border

Right border

<div class="g-1_4__m box m-bottom-4 border-top">
		<p>Top border</p>
</div>

<div class="g-1_4__m box m-bottom-4 border-bottom">
		<p>Bottom border</p>
</div>

<div class=" g-1_4__m box m-bottom-4 border-left">
		<p>Left border</p>
</div>

<div class="g-1_4__m g-omega box m-bottom-4 border-right">
		<p>Right border</p>
</div>

Border Sizes

Border size 0

Border size 1

Border size 2

	<div class="border border-0">
		<p>Border size 0</p>
	</div>

	<div class="border border-1">
		<p>Border size 1</p>
	</div>

	<div class="border border-2">
		<p>Border size 2</p>
	</div>

Border Radius

You can specify each corner individually by using any --x-y combination, or --top|bottom|left|right respectively. All corners are specified by default.

Border radius

Border radius
top left only

Border radius
top right only

Border radius
bottom right only

Border radius
bottom left only

Border radius
top only

Border radius
right only

Border radius
bottom only

Border radius
left only

<div class="box border u-border-radius">
	<p>Border radius</p>
</div>

<div class="box border u-border-radius--top-left">
	<p>Border radius top left</p>
</div>

<div class="box border u-border-radius--top-right">
	<p>Border radius top right</p>
</div>

<div class="box border u-border-radius--bottom-right">
	<p>Border radius bottom right</p>
</div>

<div class="box border u-border-radius--bottom-left">
	<p>Border radius bottom left</p>
</div>

<div class="box border u-border-radius--top">
	<p>Border radius top </p>
</div>

<div class="box border u-border-radius--right">
	<p>Border radius right</p>
</div>

<div class="box border u-border-radius--bottom">
	<p>Border radius bottom </p>
</div>

<div class="box border u-border-radius--left">
	<p>Border radius left</p>
</div>