Border Radius
The Telerik and Kendo UI Border Radius Utilities are a collection of CSS classes that enable you to control the border radius of an element.
| Utility Class | CSS Property |
|---|---|
.k-rounded | border-radius: 0.25rem; |
.k-rounded-0 | border-radius: 0; |
.k-rounded-sm | border-radius: 0.125rem; |
.k-rounded-md | border-radius: 0.25rem; |
.k-rounded-lg | border-radius: 0.5rem; |
.k-rounded-full | border-radius: 9999px; |
.k-rounded-tl | border-top-left-radius: 0.25rem; |
.k-rounded-tl-0 | border-top-left-radius: 0; |
.k-rounded-tl-sm | border-top-left-radius: 0.125rem; |
.k-rounded-tl-md | border-top-left-radius: 0.25rem; |
.k-rounded-tl-lg | border-top-left-radius: 0.5rem; |
.k-rounded-tl-full | border-top-left-radius: 9999px; |
.k-rounded-tr | border-top-right-radius: 0.25rem; |
.k-rounded-tr-0 | border-top-right-radius: 0; |
.k-rounded-tr-sm | border-top-right-radius: 0.125rem; |
.k-rounded-tr-md | border-top-right-radius: 0.25rem; |
.k-rounded-tr-lg | border-top-right-radius: 0.5rem; |
.k-rounded-tr-full | border-top-right-radius: 9999px; |
.k-rounded-br | border-bottom-right-radius: 0.25rem; |
.k-rounded-br-0 | border-bottom-right-radius: 0; |
.k-rounded-br-sm | border-bottom-right-radius: 0.125rem; |
.k-rounded-br-md | border-bottom-right-radius: 0.25rem; |
.k-rounded-br-lg | border-bottom-right-radius: 0.5rem; |
.k-rounded-br-full | border-bottom-right-radius: 9999px; |
.k-rounded-bl | border-bottom-left-radius: 0.25rem; |
.k-rounded-bl-0 | border-bottom-left-radius: 0; |
.k-rounded-bl-sm | border-bottom-left-radius: 0.125rem; |
.k-rounded-bl-md | border-bottom-left-radius: 0.25rem; |
.k-rounded-bl-lg | border-bottom-left-radius: 0.5rem; |
.k-rounded-bl-full | border-bottom-right-radius: 9999px; |
.k-rounded-t | border-top-radius: 0.25rem; |
.k-rounded-t-0 | border-top-radius: 0; |
.k-rounded-t-sm | border-top-radius: 0.125rem; |
.k-rounded-t-md | border-top-radius: 0.25rem; |
.k-rounded-t-lg | border-top-radius: 0.5rem; |
.k-rounded-t-full | border-top-radius: 9999px; |
.k-rounded-r | border-right-radius: 0.25rem; |
.k-rounded-r-0 | border-right-radius: 0; |
.k-rounded-r-sm | border-right-radius: 0.125rem; |
.k-rounded-r-md | border-right-radius: 0.25rem; |
.k-rounded-r-lg | border-right-radius: 0.5rem; |
.k-rounded-r-full | border-right-radius: 9999px; |
.k-rounded-b | border-bottom-radius: 0.25rem; |
.k-rounded-b-0 | border-bottom-radius: 0; |
.k-rounded-b-sm | border-bottom-radius: 0.125rem; |
.k-rounded-b-md | border-bottom-radius: 0.25rem; |
.k-rounded-b-lg | border-bottom-radius: 0.5rem; |
.k-rounded-b-full | border-bottom-radius: 9999px; |
.k-rounded-l | border-left-radius: 0.25rem; |
.k-rounded-l-0 | border-left-radius: 0; |
.k-rounded-l-sm | border-left-radius: 0.125rem; |
.k-rounded-l-md | border-left-radius: 0.25rem; |
.k-rounded-l-lg | border-left-radius: 0.5rem; |
.k-rounded-l-full | border-left-radius: 9999px; |
Rounding Corners
Use the k-rounded, k-rounded-sm, k-rounded-md, k-rounded-lg, and k-rounded-full utilities to apply different border radius sizes to an element.
Applying No Rounding
Use the k-rounded-0 utility to remove the border radius of an element.
Rounding Individual Sides
Use the k-rounded-{side}, k-rounded-{side}-sm, k-rounded-{side}-md, k-rounded-{side}-lg, and k-rounded-{side}-full utilities to apply a different border radius size to a specific side of an element. Replace {side} with the desired side of the element, for example, use k-rounded-tl to change the top left side of the element.
Rounding Individual Corners
Use the k-rounded-{corner}, k-rounded-{corner}-sm, k-rounded-{corner}-md, k-rounded-{corner}-lg, and k-rounded-{corner}-full utilities to apply a different border radius size to specific corners of an element. Replace {corner} with the desired corners of the element, for example, use k-rounded-l to round the left corners of the element.
