Images are used for a large amount of webpages, with the purpose of illustrate, argue or simple make things look better. Many times images look even better when proper border are used. In tis article I’ll write about how you can put stylish borders to images of your website using CSS.
STEPS TO FOLLOW:
1. First prepare three nice pictures having dimensions 150×100 pixels and save them in the same folder on your computer. Rename them image1.jpg, image2.jpg and image3.jpg (or what your format is).
2. Then create a new html document and save it as cssborders.html in the same folder with the pictures you prepared.
3. I will create three CSS classes for showing you three types of CSS borders you can put to your pictures.
.cssimageborder1{
border-width: 1px; /* this CSS property sets the thickness of the border line*/
border-style: solid; /* this CSS property sets the style of the border, you can choose from dashed, dotted, double, groove, hidden, inherit, inset, none, outset, ridge, solid */
border-color: #CCCCCC; /* this CSS property sets the color of the border */
}
The code above may be also put in one declaration like below:
.cssimageborder1{
border: 1px solid #CCCCCC;
}
Let’s create now the other two classes:
.cssimageborder2{
border: 6px solid #EFEFEF;
}.cssimageborder3{
border: 1px dashed #CCCCCC;
padding:5px;
}In the cssimageborder3 class I added the CSS padding property which controls the distance between the border and the image.4. Great! Put this code in your head section of your cssborders.html document using the <style> tag then add the following code in the body section:
<body>
<img src="image1.jpg" mce_src="image1.jpg" alt="Pencils" class="cssimageborder1" />
<img src="image2.jpg" mce_src="image2.jpg" alt="Food" class="cssimageborder1" />
<img src="image3.jpg" mce_src="image3.jpg" alt="Flowers" class="cssimageborder1" />
<br/><br/>
<img src="image1.jpg" mce_src="image1.jpg" alt="Pencils" class="cssimageborder2" />
<img src="image2.jpg" mce_src="image2.jpg" alt="Food" class="cssimageborder2" />
<img src="image3.jpg" mce_src="image3.jpg" alt="Flowers" class="cssimageborder2" />
<br/><br/>
<img src="image1.jpg" mce_src="image1.jpg" alt="Pencils" class="cssimageborder3" />
<img src="image2.jpg" mce_src="image2.jpg" alt="Food" class="cssimageborder3" />
<img src="image3.jpg" mce_src="image3.jpg" alt="Flowers" class="cssimageborder3" />
5. You are ready! Your webpage should look like in the image below:
You can download from here my cssimageborder.html.
Entries (RSS)
April 6th, 2008 at 10:45 am
I’m so glad that I finally found what I was searching for! It doesn’t matter what other people write or think, I just know for sure that I’m right. Here I found all useful information , all I exactly needed for my new experience. It’s not just a great entertaining source, it’s also a way of giving different information for all of us