Thursday, June 1, 2017

Image with rounded corners




  • We need to use the image tag
  • Need to be careful while specifying the relative path as shown below
  • Create css class with border-radius
  • Use the css class in the html 




Image Source specify Path

Standard css for image

.bpic{
    width:200px;
    height:160px;
    padding: 5px 5px 5px 5px;
    border-radius: 20px;

}



html file


<div>
<!--Combine to css elements -->
 <img class="bpic" src="app/images/Atharv.jpg"/>
 <span class="bname"> Atharv Kudupu</span><br>
 <img class="gpic" src="app/images/Shanvi.jpg"/>
 <span class="gname"> Shanvi Kudupu</span>
<p>
    
</p>
<div>.

No comments:

Post a Comment