CSS Tips and Tricks
Use the Border-Radius CSS Property to Define Horizontal and Vertical Radius
In this lesson, we dive into using CSS border-radius. We will look at how you can use it to create not only basic shapes but complex ones too.
We will start with a shorthand notation that allows us to define a uniform radius for an element. Then we will progress onto a longhand notation. That will give us the power to define the horizontal and vertical radius for each corner of an element.
Let's turn a square head into an egg head!
Jhey Tompkins: [0:00] Let's add some curves to this egg. We can use a shorthand border-radius notation to create a uniform radius on our element. This supplies a 50 percent radius to the top-left, top-right, bottom-right, and the bottom-left of our element.
[0:19] That means we have a radius that is both 50 percent of the element's width and 50 percent of the element's height. This shape isn't quite right.
[0:35] We can use a longhand notation that allows us to define a border-radius for the top-left, top-right, bottom-right, and bottom-left. We can see with our shape that the top-left of our element has a border-radius of 35 percent. That's 35 percent going from the top-left to the top-right horizontally and 35 percent going from the top-left to the bottom-left vertically.
[1:12] For our shape, we might decide that we only need a border-radius for the top-left and the top-right corners. That's still not right. You can see the curve there. That curve should really be going more angled across here. Instead, it does this straight up and then around.
[1:40] The real magic is when we use an optional forward slash in our border-radius. This allows us to define both a horizontal and a vertical radius for each corner. That gives us the shape we want. We apply our border-radius to the top two corners of our element, 50 percent horizontally and a 100 percent vertically.
[2:08] That means we have a radius that spans from the top-center of our element to each corner, each bottom corner of our element.
[2:21] One tip for finding the correct border-radius is to use your browser's developer tools. For example, in Chrome, you can inspect the border-radius and use your mouse wheel to adjust the values.
[2:37] As we can see here, a horizontal value of percent for our top-left corner and a vertical value of a 100 percent for our top-left corner gives us an almost square corner. Bumping that value back up to 50 percent gives us the shape that we wanted.
[2:58] In review, the shorthand border-radius notation allows us to create more basic shapes where 50 percent would give us a circle. Using a longhand notation, we're able to define a radius for each corner of our element going from top-left, to top-right, to bottom-right, to bottom-left.
[3:23] But if we want full control, we can use the optional forward slash to define both the horizontal and the vertical radius for each corner of our element. This allows us to create more complex shapes with our CSS.