How to add borders to Images | Using CSS

Often adding borders to images makes it look pretty and professional, but it is a time consuming process to open and edit images in photo editors. CSS makes it easier to add borders, Here is an example:

Borders using CSS
HTML Code:
<img src="mypic.jpeg" id="myImageWithoutBorder"/>
<img src="mypic.jpeg" id="myImageWithBorder"/>

CSS Code:
#myImageWithBorder {
border-width: 2px;
border-style: solid;
border-color: #000000;

You can also write compact version of CSS like this

img{border:2px solid #000000;}


Popular posts from this blog

How CSS3 Works