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”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://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