Slide 1

CSS Images

Rounded Images

Use the border-radius property to create rounded images:

Examples:-

 img {
   border-radius: 8px;
 }

Output

Examples:-

 img {
   border-radius: 50%;
 }

Output

Try to display examples as shown below

Slide 2

Thumbnail Images

Use the border property to create thumbnail images.

 img {
   border: 1px solid #ddd;
   border-radius: 4px;
   padding: 5px;
   width: 150px;
 }

 <img src="paris.jpg" alt="Paris">

Output

 img {
   border: 1px solid #ddd;
   border-radius: 4px;
   padding: 5px;
   width: 150px;
 }

 img:hover {
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
 }

 <a href="paris.jpg">
   <img src="paris.jpg" alt="Paris">
 </a>

Output

Add These CSS properties to your HT003APT task

1. create a darkgray border around your image.
2. add lightblue background color to your description.
3. change the description font family to monospace.