Image styling

In an earlier lesson you created a webpage with images of your classmates and even gave rounded corners to the images. Now draw on your freecodecamp.org lessons and add solid, 30 pixel, with red and black borders to all of those images.

In order to apply borders to ALL of your images we are going to modify the img rule that you should have already created in your stylesheet when you gave rounded corners to the images. When style a standard html element such as img, h2, p, etc. all instances of that element in your document are automatically affected by the styling.  This exercise is VERY easy, but even so, I added a couple of hints below but to help you move along.

Hint 1:  border-width:   30px;     border-bottom-color:    red; border-top-color: black;

Hint 2: don't forget to change colors for the left and right borders as well.

When you are finished your pictures will most likely look like the one below. If you didn't set border-radius to 50% they won't be rounded however.

Print Friendly, PDF & Email