07. Border Radius border-radius

Border Radius

Boxes that have straight corners are often unappealing to the eye. To make a more smooth, rounded corner, we can use the border-radius property.

We specify a unit length for the radius - the larger this is, the more circular your corners become.

With a border-radius of 5px.
With a border-radius of 10px.
With a border-radius of 10px 20px.
With a border-radius of 10px 15px 20px 25px.

Specifying a specific corner

If you'd like to specify specific a specific corner, use:border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius

The shorthand for these is from border-radius.

  1. One value specifies all corners.
  2. Two values specify the top-left/bottom-right, and top-right/bottom-left.
  3. Three values specify top-left, top-right/bottom-left, and bottom-right.

Creating an Ellipse

To create an ellipse, specify a width and height, then give two unequal values for the border-radius, separated by a forward slash (/).

#oval {
  width: 200px;
  height: 100px;
  border-radius: 100px / 50px;
  background: blue;
  margin: 10px auto;
}

Build modern and responsive webpages

HTML & CSS

Build modern and responsive webpages Try Front-end

This book teaches HTML as if it's for anyone - hobbyists, students, and professionals - and it's full-color throughout. It utilizes information graphics and lifestyle photography to explain the topics in a simple way that is engaging. You can progress through the chapters from beginning to end or just dip into topics of particular interest at your leisure.

$ Check price
29.9929.99Amazon 4.5 logo(926+ reviews)

More Front-end resources

Aching back from coding all day?

Inversion Therapy Table

Aching back from coding all day? Try Back Problems

Stretch out your back and relieve your back muscles with inversion therapy. This device counteracts the forces of gravity on the body by decompressing and elongating the spine. By using this product just ten minutes a day, you can be well on your way to improved circulation and posture while relieving muscle aches, back pain and stress.

$$ Check price
119.98119.98Amazon 4.5 logo(1,700+ reviews)

More Back Problems resources

Ad