How to add border to images with CSS | Tutorial | Example | HowtoASP.NET

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