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:
<body>
<img src="mypic.jpeg" id="myImageWithoutBorder"/>
<img src="mypic.jpeg" id="myImageWithBorder"/>
</body>



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;}




Comments

Check out

CSS Sprites | What are They?

Login form | Using CSS3

Remove Scrollbars from syntaxhighlighter

Adding a button in HTML | styling a button

HTML5 Semantic Tags | What do they mean

How to remove plus and minus characters from input type number

HTML5 | LocalStorage

How CSS3 Works

jQuery Resources | Support and tutorial help