Rounded Corners
Characteristics of rounded corners:
- Rounded corners can be placed on Image and Background Areas components
- Rounded corners are used for contrast and help add visual interest
- The border radius for our BGSU brand is 12px
- Adding rounded corners does not have an effect on height or width of the component
- There are two rounded corner options:
- round all corners of the element
- round two opposite corners
How to Trigger Rounded Corners (all corners)
Add the class "rounded" (for images) and "card" (for background-areas) to the Classes tab of the component dialog box
rounded
Images
card
Background Areas
Cards
Cards are used to round background-areas. They are a significant part of our new digital brand at BGSU. There are multiple ways that cards can be used, and they can be used for a variety of components. Learn about cards.
How to Trigger Rounded Diagonal Corners
Add the class "rounded-diagonal" (for images and background-areas) to the Classes tab of the component dialog box
rounded-diagonal
Images
Background Areas
Rounded Diagonal
This is a new style within our BGSU brand but works well for a variety of layouts. The class adds a border radius to the top-left and bottom-right corners of image or background area components.
Updated: 05/30/2023 08:57AM