Borders

Explore a variety of border utilities and classes to customize and enhance the visual appearance of the limits of your elements.

About

Border utilities is a class group designed to enhance the border features of elements. With its customizable and responsive structure, it strives to fulfill all your project's border property needs through simple class assignments.

In JTB_MD, the assigned class base for all border classes is .jtbB.

Sizing

To assign borders to an element in your project, you can simply add border-sizing classes from JTB_MD.

.jtbB-[ 0 | 1 | 2 | 3 | 4 ]

Where the red values represent thickness of borders in px.

                            <!-- Element with 1px border-width in all edges -->
<span class='jtbB-1'>...</span>
                        

You can also add a border for only a specific edge of an element. To achieve this, append the first letter of the respective edge to the end of the classbase, then define the size.

.jtbB[ T | R | B | L ]-[ 0 | 1 | 2 | 3 | 4 ] where:

• T represents the top edge of the element,
• R represents the right edge of the element,
• B represents the bottom edge of the element,
• L represents the left edge of the element.

                            <!-- Element with 1px border-width (top edge only) -->
<span class='jtbBT-1'>...</span>
                        

Coloring

Border coloring classes work with default color palettes, as outlined in the Colors section.

To specify the border color for any element using the library classes, append the color name to the classbase, along with its corresponding weight number.

.jtbB-[ purple | blue | aqua | green | lime | yellow | orange | volcano | red | neutral | white | black ][ 1 - 13 ]

                            <!-- Element with border color aqua (weight = 4) -->
<div class='jtbB-aqua4'>...</div>
                        

It is also possible to assign border colors to a specific edge of the element in JTB_MD. For doing this you need to add the first letter of the related edge at the end of classbase.

.jtbB[ T | R | B | L ]-[ purple | blue | aqua | green | lime | yellow | orange | volcano | red | neutral | white | black ][ 1 - 13 ] where:

• T represents the top edge of the element,
• R represents the right edge of the element,
• B represents the bottom edge of the element,
• L represents the left edge of the element.

                            <!-- Element with distinct border-top color (color = aqua & weight = 4) -->
<div class='jtbBT-aqua4'>...</div>
                        

Styling

To set the border style of any element with the library classes, you can simply add the related style type at the end of classbase.

.jtbB-[ dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid ]

                            <!-- Element with dashed border -->
<span class='jtbB-dashed'>...</span>
                        

It is also possible to assign border styles to a specific edge of the element in JTB_MD. For doing this you need to add the first letter of related edge at the end of classbase.

.jtbB[ T | R | B | L ]-[ dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid ] where:

• T represents the top edge of the element,
• R represents the right edge of the element,
• B represents the bottom edge of the element,
• L represents the left edge of the element.

                            <!-- Element with dashed border on top edge only -->
<span class='jtbBT-dashed'>...</span>
                        

Rounding

To customize the border radius of an element using the library classes, choose one of the following options.

.jtbB-[ rect | circle ] or

.jtbB-rounded-[ 0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3 ] where the numbers specified in classes represent multipliers of the main font size of the project. To make it more clear, to calculate how much radius will be applied to element, you can easily convert the underscore to a period and multiply it by your base font size. As an example, if the class contains the value 1_75, it indicates that the radius will be 1.75rem.

                            <!-- Element with no border-radius in all corners -->
<span class='jtbB-rect'>...</span>

<!-- Element with 100% border-radius in all corners -->
<span class='jtbB-circle'>...</span>

<!-- Element with rounded border-radius in all corners (0_5 rem) -->
<span class='jtbB-rounded-0_5'>...</span>

                        

If you want to apply your radius classes into a specific edge of the element, you can do that via adding the first letter of related edge to your class.

.jtbB[ T | R | B | L ]-[ rect | circle ]

.jtbB[ T | R | B | L ]-rounded-[0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3]

• T represents the top edge of the element,
• R represents the right edge of the element,
• B represents the bottom edge of the element,
• L represents the left edge of the element.

                            <!-- Element with border-radius on top edge corners -->
<span class='jtbBT-rounded-3'>...</span>
                        

It is also possible to assign border-radius to a specific corner of the element in JTB_MD. For doing this you need to add the first letters of related corner at the end of classbase.

.jtbB[ TL | TR | BR | BL ]-[ rect | circle ]

.jtbB[ TL | TR | BR | BL ]-rounded-[ 0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3 ] where:

• TL represents the top-left corner of the element,
• TR represents the top-right corner of the element,
• BR represents the bottom-left corner of the element,
• BL represents the bottom-right corner of the element.

                        <!-- Element with 3rem border-radius (top-right corner) -->
<span class='jtbBTR-rounded-3'>...</span>
                    

Responsiveness

You can make your element's borders respond differently on various screen sizes. Activate this utility by adding the corresponding screen breakpoint (defined in Breakpoints seciton) at the end of the class with a hyphen (-):

Refer to the table below to understand which parts of the utility group can be used with screen breakers: