Rounded Corners

Rounded corners are made with the border-radius property, as you know from the CSS course. In Tailwind, they are the rounded-* classes:

You know the size names from the font sizes and the max widths: from extra small (xs) through medium (md) to extra large (xl, 2xl, 3xl). Careful with older examples on the internet, written for Tailwind 3: some names have shifted since. There, rounded-sm was only 2 pixels, like today's rounded-xs.

rounded-full is special: the radius is so large that the shorter sides of the element turn into half circles. A button becomes a pill, and a square, such as a picture with size-16, a circle. In the CSS course, you made a circle with border-radius: 50%, but on a rectangle, 50% gives an ellipse, not a pill:

rounded-full border-radius: 50%

You can also round only some corners: rounded-t-2xl rounds the top two (t for top, as with borders), rounded-l-lg the left two, and rounded-tl-lg only the top left one.