Use the "border-radius" CSS property to add rounded corners to elements

You can use the "border-radius" CSS property to add rounded corners to an element's outer border edge by defining the radius of the element's corners. You can use pixels or percentage to set the border-radius.

How do you want to style these borders? You've got options! You can set the radius of all four corners together, or each corner or pairs of corners separately. In this lesson, we will start with an image with one border radius, and explore how changing the percentage of the border-radius impacts how "rounded" the border corners become.

We will also use the ":hover" psuedo-class to change border-radius on mouse-over.