Borders

src/scss/_core/utils/_border.scss

Class	Description	Quick Example
`.border` `.border-primary` `.border-secondary` `.border-success` `.border-danger` `.border-info` `.border-dark` `.border-light` Responsive only `.border-top-lg` `.border-top-md` `.border-top-xs` `.border-bottom-lg` `.border-bottom-md` `.border-bottom-xs`	Apply a border color. Can be mixed with `.border-[dotted\|dashed]` If element has no predefined border, should be added `.border` Responsive classes - apply a border only for specified viewport (lg\|md\|xs). Used instead of `border-top\|bottom` in some responsive situations.	.border .border .border-primary .border .border-success .border .border-danger .border-dashed .border .border-warning .border-dashed .border-2
`.border-top` `.border-end` `.border-bottom` `.border-start`	Apply a specific border (you can mix them).	.border-top .border-end .border-start .border-bottom .border-start .border-end .border-top .border-bottom .border-start .border-danger .border-start .border-warning .border-3
`.rounded` `.rounded-xl` `.rounded-circle` `.row-pill`	Border radius - can be mixed with almost any block/box/element.	.border .border-primary .rounded .border .border-primary .rounded-xl .border .border-primary .row-pill .shadow-lg .rounded .shadow-lg .row-pill
`.border-1` `.border-2` `.border-3`	Change the border width (in pixels) of any bordered element. You can also mix with color borders: `.border-[primary\|danger\|warning\|success]` `.border-[top\|right\|left\|bottom]` If element has no predefined border, should be added `.border`	.border-2 .border-3 .border-2 .border-danger .border-3 .border-start border-warning
`.border-solid` `.border-dotted` `.border-dashed` `.border-gray-100` `.border-gray-200` `.border-gray-300` `.border-gray-400` `.border-gray-500` `.border-input`	Apply a border style. Can also be mixed with border colors & width. `.border-input` is the input/select border color, if any element need same border color.	.border-primary .border-solid .border-primary .border-dotted .border-primary .border-dashed .border-primary .border-dashed .border-1 .border-gray-400
`.border-transparent`	Instead of removing a border, there are situations where just transparent is needed, to keep the alingnment in place.
`.border-0` `.border-top-0` `.border-end-0` `.border-bottom-0` `.border-start-0`

Responsive only