# 2.2: Borders

Now create the following shapes

```css
.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

```css
.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?&#x20;

![eye](https://github.com/eleven-fifty-academy/javascript-152-advancedcss/tree/6fc6d0cae9728bd26b865b4fea275022abac72da/docs/0.2%20borders_shapes/BSassets/eye.PNG)

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?
