How to add border to images with CSS

Your Web project may include pictures used to illustrate the text. In this case you may want to border these pictures. Adding a border to an image is a simple task using CSS. The next example shows two possible ways to do this:

File test.css

img {

border-width: 1px;

border-style: solid;

border-color: #000000;

}

or

File test.css

img {

border: 1px solid #000000;

}

You can use the next test file to see how this technique works:

 

File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>

<head>

<title>How to add border to images with CSS</title>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<link rel=”stylesheet” type=”text/css” href=”test.css” />

</head>

<body>

<img src=”sailboard1.jpg” alt=”sailboard one” />

<img src=”sailboard2.jpg” alt=”sailboard two” />

</body>

</html>

 

The next picture shows the result:

Adding border to images with CSS

Adding border to images with CSS