Decoration Utilities

Rounded Corners (using Border Radius)

There are several options for rounded corners in Codebase (handled by CSS border radius). All of these apply to all four corners.

.rounded-sm
border-radius
= 0.25rem (4px) default

.rounded
border-radius
= 0.5rem (8px) default

.rounded-lg
border-radius
= 1rem (16px) default

.rounded-pill
This will round the left and right of buttons, form elements, etc. where the content width is greater then its height.

.rounded-full
This will produce an ellipse if the block element is not a square.

Unrounded Corners

If you want to round only some corners and not others, then apply one of these .unrounded-* classes to any element that has rounded corners.

These .unrounded-* classes work on all the .rounded-* classes above. They also work on buttons and form elements.

.unrounded-top-right / .unrounded-bottom-right / .unrounded-bottom-left / .rounded-top-left
.unrounded-top / .unrounded-bottom / .unrounded-left / .rounded-right
.unrounded-all

.unrounded-top-right

.unrounded-bottom-right

.unrounded-bottom-left

.unrounded-top-left

.unrounded-right

.unrounded-bottom

.unrounded-left

.unrounded-top

.unrounded-all