Back to Week 6 page »

Basic Rounded Corners

Use one value to specify rounded corners on all sides.

box 1

This is box 1

.box1 {
   border-radius: 15px;
}

box 2

This is box 2

.box2 {
   border-radius: 30px;
}

box 3

This is box 3

.box3 {
   border-radius: 50%;
}

Rounded Borders

Borders are also automatically rounded with border-radius.

box 4

This is box 3

.box4 {
   border: 5px solid black;
   border-radius: 15px;
}

Rounding Individual Corners

box 5

This is box 5

.box5 {
   border: 5px solid black;
   border-top-left-radius: 15px;
   border-bottom-right-radius: 15px;	
}

Irregular Rounding

box 6

This is box 6

.box6 {
   border: 2px solid black;
   border-top-left-radius: 15px 5px;
   border-top-right-radius: 35px 10px;
   border-bottom-left-radius: 30px 54px;
   border-bottom-right-radius: 21px 12px;
}

Rounding Image corners

A photo of a tucked in monster

HTML:

<img class="box7 alignright" src="monster.jpg" alt="A photo of a tucked in monster">

CSS:

.box7 {
   border-radius: 50%;
}

Back to Week 6 page »