CSS Border Property Demystified

Friday, August 15, 2014

Adding a nice border to your images will give them a clean and modern look. This tutorial will show you how to add border using CSS. It will also explain all the different options and properties for adding borders using CSS.

Steps to add border to image with CSS

1. First of all, create an html file. You may use any IDE like notepad or notepad ++ or Adobe Dreamweaver to create an html file. In this tutorial, we are using plain notepad that is available in any Windows PC. Open notepad any type following code:

<html >

<head >

<title >CSS tutorial – 5</title>

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

</head >

<body >

<img src=”img1.jpg” class=”im1”>

<img src=”img2” class=”im2”>

</body >

</html >

And then save the file as .html (eg : tut5.html).

Here,

<link rel=”stylesheet” type=”text/css” href=”css/style.css” /> will link the stylesheet that we are going to create.

<img > tag will insert image to the html file and we have given two separate class names so that we can use different border styles for each one. If you don’t use class then the same border style/color will be applied to both of the images. Make sure you put two images in the same folder where you have saved your html file.

step-1-create-html-border

2. Next, in the same directory (folder), create another folder named css and create new css file named style.css. To do that, open notepad and save it as style.css

step-2-create-css-border

3. Next, type the following code in the css file we have created in step-2 i.e. style.css

. im1{

border -color: #ff0000;

border -style: solid;

border -width: 5px;

}

. im2{

border : 5px dotted blue;

}

Here,

There are two ways to specify border . Either you can use each property separately like we did for im1 or you can use all in one, like we did in im2. In im2, the first one is for width, second is style and third is color.

background -repeat controls how the background image needs to be repeated. By default, if the background image size is small then it will get repeated through out the page (both x axis and y axis) but if you want to control this, then you can use background-repeat property .

There are eight possible values in CSS for border-style:

dotted : creates dotted border

dashed : creates a dashed border

solid : creates a solid border

double : creates two borders with same width

groove : creates a 3D grooved border depending on color value given.

ridge : creates a 3D ridged border depending on color value given.

inset : creates a 3D inset border depending on color value given.

outset : creates a 3D outset border depending on color value given.