2.0: Borders

Corners. Corners are sharp. Corners are harsh. Now we are going to soften things up! This won't take very long.

Prep: copy and paste HTML

<!--rounded corners example-->
  <div class="wrap">
  <div class="softie"></div>
  </div>

<!--targeted corners example-->
  <div class="wrap">
  <div class="picasso"></div>
  </div>

<!--ellipse/oval-->
  <div class="wrap">
  <div class="egg"></div>
  </div>

<!--shape experiment-->
  <div class="wrap">
  <div class="wonder"></div>
  </div>


  <div class="wrap">
    <div class="wrapper">
    <div class="circ1">
        <div class="circ2">
        </div>
    </div>
    </div>
  </div>

Property	Value
border-radius

Border radius

We'll make a square and round the corners by adding border-radius property. Shapes HTML

.softie{
  background: orange;
  width: 300px;
  height: 300px;
  border-radius: 20px;
}

You should have created a orange box with rounded corners. Notice how we didn't have a border on our square? You don't need a border, but you could have a border if you wanted one.

softie

That is super nifty BUT we can go farther. We can use multiple values to create all sorts of shapes.

Let's try it out.

.picasso{
  background: navy;
  width: 100px;
  height: 100px;
  border-top-left-radius: 20px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 65px;
}

Does your shape look like this

picasso

Take a few minutes to play around with different values.