Helpers borders

Met de class border kun je lijnen rondom elementen plaatsen.

Met de class border-top plaats je een lijn boven een element.

Met de class border-right plaats je een lijn aan de rechterkant van een element.

Met de class border-bottom plaats je een lijn aan de onderkant van een element.

Met de class border-left plaats je een lijn aan de linkerkant van een element.

<div class="border"></div>

<div class="border-top"></div>

<div class="border-right"></div>

<div class="border-bottom"></div>

<div class="border-left"></div>

Met de classes border border-top-0 verwijder je de bovenlijn.

Met de classes border border-right-0 verwijder je de rechterlijn.

Met de classes border border-bottom-0 verwijder je de onderlijn.

Met de classes border border-left-0 verwijder je de linkerlijn.

<div class="border border-top-0"></div>

<div class="border border-right-0"></div>

<div class="border border-bottom-0"></div>

<div class="border border-left-0"></div>

Met de classes border border-width-2 t/m border-width-10 bepaal je de breedte van de lijn in pixels.

Er zijn 2px, 4px, 6px, 8px en 10px.

<div class="border border-width-2"></div>

<div class="border border-width-4"></div>

<div class="border border-width-6"></div>

<div class="border border-width-8"></div>

<div class="border border-width-10"></div>

Met de classes border border-style-* bepaal je de vorm van de lijn.

Er zijn dashed en dotted.

<div class="border border-style-dashed"></div>

<div class="border border-style-dotted"></div>

<div class="border border-color-white"></div>

<div class="border border-color-black"></div>

<div class="border border-color-gray"></div>

<div class="border border-color-blue"></div>

<div class="border border-color-red"></div>

<div class="border border-color-orange"></div>

<div class="border border-color-green"></div>

<div class="border border-color-lime"></div>

<div class="border border-color-yellow"></div>

<div class="border border-color-brown"></div>

<div class="border border-color-purple"></div>

<div class="border border-color-pink"></div>