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.
Hiro Nishimura: [0:00] Create a class for the border effect. I named mine effect. I have an image set to class="effect" in my index.html. Now, let's set a border for this image. We'll give it a solid yellow border with border-width of 10px. Let's refresh the page and see our new image border.
[0:17] We will use the border-radius property to make the corners of this image rounder. You can use pixels or percentage here. We'll use percentage. Let's set it to 50%. Let's refresh.
[0:27] You can set the radius for all four corners together with one percentage as I did here, or you can set each corner's radius separately. The border-radius values go from top left, top right, to bottom right, to bottom left. The higher the percentage of the radius, the more rounded the border. Let's try 5%, 10%, 30%, and 85%. Let's refresh.
[0:51] Now let's add the mouseover effect with the hover pseudo-class. We will keep the border-style, color, and width the same for now, but change the border-radius. Let's set two radius values, 25% and 50%.
[1:07] When we refresh, the border-radius will change on mouseover. If you set two radius values, the first radius will apply to top left and bottom right. The second radius will apply to top right and bottom left corners.
[1:20] We created borders for an element and set roundedness of the border by using the border-radius property. The higher the percentage you set the radius to, the rounder the corner of the border.
[1:30] You can set each corner's radius separately, as pairs, or altogether. If you set just one radius, all four corners will have the same roundedness. If you set two radius values, the first radius will apply to the top left and bottom right corners, and the second radius will apply to the top right and bottom left corners.
[1:49] When you set them all separately, the border radius goes from top left corner to the top right, to the bottom right, to the bottom left.