Be Brav3

FCC Challenge 20: Make Circular Images with a Border Radius

March 07, 2016

In Free Code Camp Challenge 20 we need to change the CSS border radius from px to % in order to display the image as a circle:

[css]

CatPhotoApp

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

[/css]

The finished code should look like:

[css]

CatPhotoApp

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

[/css]

In addition to pixels, you can also specify a border-radius using a percentage.

Give your cat photo a border-radius of 50%.