Border Radius

Class	Properties
t.roundedTNone	borderTopLeftRadius: 0 borderTopRightRadius: 0
t.roundedRNone	borderTopRightRadius: 0 borderBottomRightRadius: 0
t.roundedBNone	borderBottomLeftRadius: 0 borderBottomRightRadius: 0
t.roundedLNone	borderTopLeftRadius: 0 borderBottomLeftRadius: 0
t.roundedTlNone	borderTopLeftRadius: 0
t.roundedTrNone	borderTopRightRadius: 0
t.roundedBrNone	borderBottomRightRadius: 0
t.roundedBlNone	borderBottomLeftRadius: 0
t.roundedSNone	borderTopStartRadius: 0 borderBottomStartRadius: 0
t.roundedENone	borderTopEndRadius: 0 borderBottomEndRadius: 0
t.roundedTsNone	borderTopStartRadius: 0
t.roundedTeNone	borderTopEndRadius: 0
t.roundedBeNone	borderBottomEndRadius: 0
t.roundedBsNone	borderBottomStartRadius: 0
t.roundedTSm	borderTopLeftRadius: 2 borderTopRightRadius: 2
t.roundedRSm	borderTopRightRadius: 2 borderBottomRightRadius: 2
t.roundedBSm	borderBottomLeftRadius: 2 borderBottomRightRadius: 2
t.roundedLSm	borderTopLeftRadius: 2 borderBottomLeftRadius: 2
t.roundedTlSm	borderTopLeftRadius: 2
t.roundedTrSm	borderTopRightRadius: 2
t.roundedBrSm	borderBottomRightRadius: 2
t.roundedBlSm	borderBottomLeftRadius: 2
t.roundedSSm	borderTopStartRadius: 2 borderBottomStartRadius: 2
t.roundedESm	borderTopEndRadius: 2 borderBottomEndRadius: 2
t.roundedTsSm	borderTopStartRadius: 2
t.roundedTeSm	borderTopEndRadius: 2
t.roundedBeSm	borderBottomEndRadius: 2
t.roundedBsSm	borderBottomStartRadius: 2
t.roundedT	borderTopLeftRadius: 4 borderTopRightRadius: 4
t.roundedR	borderTopRightRadius: 4 borderBottomRightRadius: 4
t.roundedB	borderBottomLeftRadius: 4 borderBottomRightRadius: 4
t.roundedL	borderTopLeftRadius: 4 borderBottomLeftRadius: 4
t.roundedTl	borderTopLeftRadius: 4
t.roundedTr	borderTopRightRadius: 4
t.roundedBr	borderBottomRightRadius: 4
t.roundedBl	borderBottomLeftRadius: 4
t.roundedS	borderTopStartRadius: 4 borderBottomStartRadius: 4
t.roundedE	borderTopEndRadius: 4 borderBottomEndRadius: 4
t.roundedTs	borderTopStartRadius: 4
t.roundedTe	borderTopEndRadius: 4
t.roundedBe	borderBottomEndRadius: 4
t.roundedBs	borderBottomStartRadius: 4
t.roundedTLg	borderTopLeftRadius: 8 borderTopRightRadius: 8
t.roundedRLg	borderTopRightRadius: 8 borderBottomRightRadius: 8
t.roundedBLg	borderBottomLeftRadius: 8 borderBottomRightRadius: 8
t.roundedLLg	borderTopLeftRadius: 8 borderBottomLeftRadius: 8
t.roundedTlLg	borderTopLeftRadius: 8
t.roundedTrLg	borderTopRightRadius: 8
t.roundedBrLg	borderBottomRightRadius: 8
t.roundedBlLg	borderBottomLeftRadius: 8
t.roundedSLg	borderTopStartRadius: 8 borderBottomStartRadius: 8
t.roundedELg	borderTopEndRadius: 8 borderBottomEndRadius: 8
t.roundedTsLg	borderTopStartRadius: 8
t.roundedTeLg	borderTopEndRadius: 8
t.roundedBeLg	borderBottomEndRadius: 8
t.roundedBsLg	borderBottomStartRadius: 8
t.roundedTFull	borderTopLeftRadius: 9999 borderTopRightRadius: 9999
t.roundedRFull	borderTopRightRadius: 9999 borderBottomRightRadius: 9999
t.roundedBFull	borderBottomLeftRadius: 9999 borderBottomRightRadius: 9999
t.roundedLFull	borderTopLeftRadius: 9999 borderBottomLeftRadius: 9999
t.roundedTlFull	borderTopLeftRadius: 9999
t.roundedTrFull	borderTopRightRadius: 9999
t.roundedBrFull	borderBottomRightRadius: 9999
t.roundedBlFull	borderBottomLeftRadius: 9999
t.roundedSFull	borderTopStartRadius: 9999 borderBottomStartRadius: 9999
t.roundedEFull	borderTopEndRadius: 9999 borderBottomEndRadius: 9999
t.roundedTsFull	borderTopStartRadius: 9999
t.roundedTeFull	borderTopEndRadius: 9999
t.roundedBeFull	borderBottomEndRadius: 9999
t.roundedBsFull	borderBottomStartRadius: 9999

Rounded corners

Use the t.roundedSm, t.rounded, or t.roundedLg utilities to apply different border radius sizes to an element.

t.roundedSm

t.rounded

t.roundedLg

Pills and circles

Use the t.roundedFull utility to create pills and circles.

Pill shape

Circle

No rounding

Use t.roundedNone to remove an existing border radius from an element.

This is most commonly used to remove a border radius that was applied at a smaller breakpoint.

t.roundedNone

Rounding sides separately

Use t.rounded{T|R|B|L|S|E}{Size?} to only round one side an element.

t.roundedTLg

t.roundedRLg

t.roundedBLg

t.roundedLLg

Rounding corners separately

Use t.rounded{Tl|Tr|Br|Bl|Ts|Te|Bs|Be}{Size?} to only round one corner an element.

t.roundedTlLg

t.roundedTrLg

t.roundedBrLg

t.roundedBlLg

Directional

Sides

Use t.rounded{S|E}{Size?} to only round one side an element.

ltr

t.roundedSLg

t.roundedELg

rtl

t.roundedSLg

t.roundedELg

Corners

Use t.rounded{Ts|Te|Bs|Be}{Size?} to only round one corner an element.

ltr

t.roundedTsLg

t.roundedTeLg

t.roundedBsLg

t.roundedBeLg

rtl

t.roundedTsLg

t.roundedTeLg

t.roundedBsLg

t.roundedBeLg

More info about directional layout