Border Radius

Set the border radius on an element.

Class Properties
.roundedborder-radius: 4px;
.rounded-topborder-top-left-radius: 4px;
border-top-right-radius: 4px;
.rounded-rightborder-top-right-radius: 4px;
border-bottom-right-radius: 4px;
.rounded-bottomborder-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
.rounded-leftborder-top-left-radius: 4px;
border-bottom-left-radius: 4px;
.rounded-noneborder-radius: 0px;
.rounded-top-noneborder-top-left-radius: 0px;
border-top-right-radius: 0px;
.rounded-right-noneborder-top-right-radius: 0px;
border-bottom-right-radius: 0px;
.rounded-bottom-noneborder-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
.rounded-left-noneborder-top-left-radius: 0px;
border-bottom-left-radius: 0px;
.rounded-smborder-radius: 2px;
.rounded-top-smborder-top-left-radius: 2px;
border-top-right-radius: 2px;
.rounded-right-smborder-top-right-radius: 2px;
border-bottom-right-radius: 2px;
.rounded-bottom-smborder-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
.rounded-left-smborder-top-left-radius: 2px;
border-bottom-left-radius: 2px;
.rounded-mdborder-radius: 6px;
.rounded-top-mdborder-top-left-radius: 6px;
border-top-right-radius: 6px;
.rounded-right-mdborder-top-right-radius: 6px;
border-bottom-right-radius: 6px;
.rounded-bottom-mdborder-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
.rounded-left-mdborder-top-left-radius: 6px;
border-bottom-left-radius: 6px;
.rounded-lgborder-radius: 8px;
.rounded-top-lgborder-top-left-radius: 8px;
border-top-right-radius: 8px;
.rounded-right-lgborder-top-right-radius: 8px;
border-bottom-right-radius: 8px;
.rounded-bottom-lgborder-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
.rounded-left-lgborder-top-left-radius: 8px;
border-bottom-left-radius: 8px;
.rounded-xlborder-radius: 12px;
.rounded-top-xlborder-top-left-radius: 12px;
border-top-right-radius: 12px;
.rounded-right-xlborder-top-right-radius: 12px;
border-bottom-right-radius: 12px;
.rounded-bottom-xlborder-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
.rounded-left-xlborder-top-left-radius: 12px;
border-bottom-left-radius: 12px;
.rounded-2xlborder-radius: 16px;
.rounded-top-2xlborder-top-left-radius: 16px;
border-top-right-radius: 16px;
.rounded-right-2xlborder-top-right-radius: 16px;
border-bottom-right-radius: 16px;
.rounded-bottom-2xlborder-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
.rounded-left-2xlborder-top-left-radius: 16px;
border-bottom-left-radius: 16px;
.rounded-3xlborder-radius: 24px;
.rounded-top-3xlborder-top-left-radius: 24px;
border-top-right-radius: 24px;
.rounded-right-3xlborder-top-right-radius: 24px;
border-bottom-right-radius: 24px;
.rounded-bottom-3xlborder-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
.rounded-left-3xlborder-top-left-radius: 24px;
border-bottom-left-radius: 24px;
.rounded-fullborder-radius: 9999px;
.rounded-top-fullborder-top-left-radius: 9999px;
border-top-right-radius: 9999px;
.rounded-right-fullborder-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
.rounded-bottom-fullborder-bottom-left-radius: 9999px;
border-bottom-right-radius: 9999px;
.rounded-left-fullborder-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
The documentation on this page is no complete yet, work in progress 👍