CSS Utility Classes Border
Inkline provides a set of utility classes to easily apply borders to all sides or individually to specific sides of an element.
_border-top - Adds a border to the top side of the element_border-right - Adds a border to the right side of the element_border-bottom - Adds a border to the bottom side of the element_border-left - Adds a border to the left side of the element_border - Adds a border to all sides of the element
<template>
<div class="_border!"></div>
<div class="_border-top!"></div>
<div class="_border-right!"></div>
<div class="_border-bottom!"></div>
<div class="_border-left!"></div>
</template>
Inkline provides a set of utility classes to easily remove borders from all sides or individually from specific sides of an element.
_border-top:0 - Removes the border from the top side of the element_border-right:0 - Removes the border from the right side of the element_border-bottom:0 - Removes the border from the bottom side of the element_border-left:0 - Removes the border from the left side of the element_border:0 - Removes the border from all sides of the element
<template>
<div class="_border:0!"></div>
<div class="_border-top:0!"></div>
<div class="_border-right:0!"></div>
<div class="_border-bottom:0!"></div>
<div class="_border-left:0!"></div>
</template>
Inkline provides a set of utility classes to easily add specific border colors to all sides or individually to specific sides of an element.
_border-top-color:{color} - Sets the border color for top side of the element_border-right-color:{color} - Sets the border color for right side of the element_border-bottom-color:{color} - Sets the border color for bottom side of the element_border-left-color:{color} - Sets the border color for left side of the element_border-color:{color} - Sets the border color for all sides of the element
<template>
<div class="_border-color:primary!"></div>
<div class="_border-color:secondary!"></div>
<div class="_border-color:light!"></div>
<div class="_border-color:dark!"></div>
</template>
<template>
<div class="_border-color:info!"></div>
<div class="_border-color:success!"></div>
<div class="_border-color:warning!"></div>
<div class="_border-color:danger!"></div>
</template>
<template>
<div class="_border-color:white!"></div>
<div class="_border-color:gray!"></div>
<div class="_border-color:black!"></div>
</template>
Inkline provides a set of utility classes to easily add specific border radiuses to all corners or individually to specific corners of an element.
_border-top-left-radius:{radius} - Sets the border radius for top left corner of the element_border-top-right-radius:{radius} - Sets the border radius for top right corner of the element_border-bottom-right-radius:{radius} - Sets the border radius for bottom right corner of the element_border-bottom-left-radius:{radius} - Sets the border radius for bottom left corner of the element_border-radius:{radius} - Sets the border radius for all corners of the element
_border-top-left-radius:0 - Removes the border radius from top left corner of the element_border-top-right-radius:0 - Removes the border radius from top right corner of the element_border-bottom-right-radius:0 - Removes the border radius from bottom right corner of the element_border-bottom-left-radius:0 - Removes the border radius from bottom left corner of the element_border-radius:0 - Removes the border radius from all corners of the element
<template>
<div class="_border-radius!"></div>
<div class="_border-radius:0!"></div>
<div class="_border-radius:1!"></div>
<div class="_border-radius:2!"></div>
<div class="_border-radius:3!"></div>
<div class="_border-radius:4!"></div>
<div class="_border-radius:50%!"></div>
<div class="_border-radius:100%!"></div>
<br />
<div class="_border-top-radius!"></div>
<div class="_border-top-radius:0!"></div>
<div class="_border-top-radius:1!"></div>
<div class="_border-top-radius:2!"></div>
<div class="_border-top-radius:3!"></div>
<div class="_border-top-radius:4!"></div>
<div class="_border-top-radius:50%!"></div>
<div class="_border-top-radius:100%!"></div>
<br />
<div class="_border-right-radius!"></div>
<div class="_border-right-radius:0!"></div>
<div class="_border-right-radius:1!"></div>
<div class="_border-right-radius:2!"></div>
<div class="_border-right-radius:3!"></div>
<div class="_border-right-radius:4!"></div>
<div class="_border-right-radius:50%!"></div>
<div class="_border-right-radius:100%!"></div>
<br />
<div class="_border-bottom-radius!"></div>
<div class="_border-bottom-radius:0!"></div>
<div class="_border-bottom-radius:1!"></div>
<div class="_border-bottom-radius:2!"></div>
<div class="_border-bottom-radius:3!"></div>
<div class="_border-bottom-radius:4!"></div>
<div class="_border-bottom-radius:50%!"></div>
<div class="_border-bottom-radius:100%!"></div>
<br />
<div class="_border-left-radius!"></div>
<div class="_border-left-radius:0!"></div>
<div class="_border-left-radius:1!"></div>
<div class="_border-left-radius:2!"></div>
<div class="_border-left-radius:3!"></div>
<div class="_border-left-radius:4!"></div>
<div class="_border-left-radius:50%!"></div>
<div class="_border-left-radius:100%!"></div>
<br />
<div class="_border-top-left-radius!"></div>
<div class="_border-top-left-radius:0!"></div>
<div class="_border-top-left-radius:1!"></div>
<div class="_border-top-left-radius:2!"></div>
<div class="_border-top-left-radius:3!"></div>
<div class="_border-top-left-radius:4!"></div>
<div class="_border-top-left-radius:50%!"></div>
<div class="_border-top-left-radius:100%!"></div>
<br />
<div class="_border-top-right-radius!"></div>
<div class="_border-top-right-radius:0!"></div>
<div class="_border-top-right-radius:1!"></div>
<div class="_border-top-right-radius:2!"></div>
<div class="_border-top-right-radius:3!"></div>
<div class="_border-top-right-radius:4!"></div>
<div class="_border-top-right-radius:50%!"></div>
<div class="_border-top-right-radius:100%!"></div>
<br />
<div class="_border-bottom-right-radius!"></div>
<div class="_border-bottom-right-radius:0!"></div>
<div class="_border-bottom-right-radius:1!"></div>
<div class="_border-bottom-right-radius:2!"></div>
<div class="_border-bottom-right-radius:3!"></div>
<div class="_border-bottom-right-radius:4!"></div>
<div class="_border-bottom-right-radius:50%!"></div>
<div class="_border-bottom-right-radius:100%!"></div>
<br />
<div class="_border-bottom-left-radius!"></div>
<div class="_border-bottom-left-radius:0!"></div>
<div class="_border-bottom-left-radius:1!"></div>
<div class="_border-bottom-left-radius:2!"></div>
<div class="_border-bottom-left-radius:3!"></div>
<div class="_border-bottom-left-radius:4!"></div>
<div class="_border-bottom-left-radius:50%!"></div>
<div class="_border-bottom-left-radius:100%!"></div>
</template>