Border
Utility classes for border direction, weight, color and radius
Default Border
The default class for a border is: .border. This border style is incorporated in elements such as form text imputs and select inputs. It applies a solid, 1px border, with a color of $su-gray-medium-60.
To remain consistent with the style and branding of Syracuse University, borders should be used sparingly and to separate distinct pieces of content.
| Example | Class Name | CSS Value |
|---|---|---|
Default Border |
.border | border: 1px solid #A9ADB3 |
Directional Borders
Borders can be applied to a specific edge or to the X and Y axes individually:
| Example | Class Name | CSS Value |
|---|---|---|
| .border-top | border-top: 1px solid #A9ADB3 | |
| .border-right | border-right: 1px solid #A9ADB3 | |
| .border-bottom | border-bottom: 1px solid #A9ADB3 | |
| .border-left | border-left: 1px solid #A9ADB3 | |
| .border-x | border-left: 1px solid #A9ADB3; border-right: 1px solid #A9ADB3 |
Border Weight
| Example | Class Name | CSS Value |
|---|---|---|
| .border-0 | border: none | |
| .border-1 | border: 1px solid #A9ADB3 | |
| .border-2 | border: 2px solid #A9ADB3 | |
| .border-3 | border: 3px solid #A9ADB3 | |
| .border-4 | border: 4px solid #A9ADB3 | |
| .border-5 | border: 5px solid #A9ADB3 | |
| .border-6 | border: 6px solid #A9ADB3 |
Combining Weight & Direction
Border weight can be combined with directionality by combining border size and direction. Example: .border-top-3
| Example | Class Name | CSS Value |
|---|---|---|
| .border-top-1 | border-top: 1px solid #A9ADB3 |
|
| .border-bottom-2 | border-bottom: 2px solid #A9ADB3 |
|
| .border-right-3 | border-right: 3px solid #A9ADB3 |
|
| .border-left-4 | border-left: 4px solid #A9ADB3 |
|
| .border-x-5 | border-left: 5px solid #A9ADB3; border-right: 5px solid #A9ADB3; |
|
| .border-y-6 | border-top: 5px solid #A9ADB3; border-bottom: 5px solid #A9ADB3; |
Border Color
Border colors are a utility class used to modify the color of an applied border. As such, they must be used in conjunction with and appear after a border direction or border size class, as the border color will override the default border color;
| Example | Class Names | CSS Value |
|---|---|---|
.border-2 .border-black |
border: 2px solid #A9ADB3; border-color: #000000; |
|
.border-2 .border-white |
border: 2px solid #A9ADB3; border-color: #FFFFFF; |
|
.border-3 .border-gray-light |
border: 3px solid #A9ADB3; |
|
.border-4 .border-gray |
border: 4px solid #A9ADB3; |
|
.border-left-5 .border-gray-dark |
border-left: 5px solid #A9ADB3; |
|
.border-right-6 .border-blue-light |
border-right: 6px solid #A9ADB3; border-color: #2B72D7; |
|
.border-bottom-6 .border-blue-medium |
border-bottom: 6px solid #A9ADB3; border-color: #203299; |
|
.border-top-6 .border-blue |
border-top: 6px solid #A9ADB3; border-color: #000E54; |
|
.border-orange-light |
border-left: 6px solid #A9ADB3; border-right: 6px solid #A9ADB3; border-color: #FF8E00; |
|
.border-orange |
border-top: 6px solid #A9ADB3; border-bottom: 6px solid #A9ADB3; border-color: #F76900; |
|
.border-orange-medium |
border: 6px solid #A9ADB3; border-color: #FF431B; |
|
.border-orange-dark |
border: 6px solid #A9ADB3; border-color:#D74100 |
Border Radius
Use the following utilities to add or remove rounded corners: .rounded-0 removes rounded corners, .rounded-1 applies a border radius of 4px, rounded-2 applies a border radius of 8px and .circle applies a border radius of 50%, which turns square elements into perfect circles. You do not need to use a border to apply a border radius.
| Example | Class Name | CSS Value |
|---|---|---|
.border-2 .rounded-0 |
border: 2px solid #A9ADB3; border-radius: none; |
|
.border-2 .rounded-1 |
border: 2px solid #A9ADB3; border-radius: 4px; |
|
.rounded-2 |
border-radius: 8px; |
|
.circle |
border-radius: 50%; |