2.2: Borders

Now create the following shapes

.circ1{
  width: 9em;
  height: 9em;
  border-radius: 50%;
  background: #000;
  position: relative;
  display: inline-block;
}

.circ2{
  width: 9em;
  height: 9em;
  border: 30px solid #eee;
  background: #eee;
  border-top-left-radius: 8em;
  border-bottom-right-radius: 8em;
  position: relative;
  top: 70px;
  left: 165px;
}

Alright, moving onward!

Having a square and only 4 corners to work with is a little limiting for me. For you too?Good news, we can specify different horizontal and vertical radii by splitting the values with a '/'.

Make the following changes to class .picasso

.egg{
  background: #2AD2FF;
  width: 100px;
  height: 150px;
  border-radius: 50px/100px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

What shape did it make?

eye

What happens when you . . .

• change px to %? em? vh? vw?

• add a border? to only the top? bottom? left? right?

• add this line of code: border-radius: 10% 0 10% 50%/5% 10% 10% 50%?

• change values to numbers exceeding 100?