Border Radius

Overview

These classes can be used to set the border radius of an element. By using these classes, you can create elements with rounded corners, such as buttons, cards, and input fields.

Classes

Class	Description
rounded	Adds the project standard border radius to the element. By default this is 0.75rem, equivalent to rounded-xl.
rounded-none	Removes all border radius from the element.
rounded-xs	Adds an extra small border radius to the element.
rounded-sm	Adds a small border radius to the element.
rounded	Adds a medium border radius to the element.
rounded-md	Adds a medium border radius to the element.
rounded-lg	Adds a large border radius to the element.
rounded-xl	Adds an extra large border radius to the element. (Default project standard)
rounded-2xl	Adds a 2x large border radius to the element.
rounded-3xl	Adds a 3x large border radius to the element.
rounded-full	Adds a full border radius to the element.

Class	Description
tl- rounded	Adds the project standard border radius to the top left corner of the element.
tr-rounded	Adds the project standard border radius to the top right corner of the element.
br-rounded	Adds the project standard border radius to the bottom right corner of the element.
bl-rounded	Adds the project standard border radius to the bottom left corner of the element.