rurtubia
5/31/2015 - 6:39 PM

Changing the size of an image with CSS, adding borders to it and changing its style and border-radius

Changing the size of an image with CSS, adding borders to it and changing its style and border-radius

making_rounded_images_with_css.html
content_copyfile_download
<style>
  .rounded-border {
    border-radius: 50px;
  }
</style>

<img  class='rounded-border' 
      src='https://bit.ly/fcc-kittens'/>
change_image_size.html
content_copyfile_download
<style>
  .smaller-image{
    width:100;  
  }
</style>

<img src='https://bit.ly/fcc-kittens' class="smaller-image"/>
alt_text_in_img_tag.html
content_copyfile_download
<img
    src='https://bit.ly/fcc-kittens'
    alt="A cute orange cat lying onits back"/>
add_rounded_border_to_image.html
content_copyfile_download
<style>
  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 25px;
  }
</style>

<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>
add_border_to_image_css.html
content_copyfile_download
<style>
  .thick-border {
    border-width: 10px;
    border-style: solid;
  }
</style>

<img class='thick-border' 
     src='https://bit.ly/fcc-kittens'/>