Style Images with good looking Frames in CSS

hey..
I was just wondering how to add a good looking frame to an image. I googled it a lot, but, couldn’t find a good enough solution.. So, I decided to use my own creativity with CSS and developed it.. Here’s the result:

CSS Example

(Oops!! its my Boss’s photo.. sorry boss! )

The code for this one is ->

In the HTML page:

<img class=”framesection src=”/images/urImage.jpg/>
In the CSS File:
.framesection {
background-color:white;
border-bottom:2px solid black;
border-right:2px solid #555555;
border-width:2px;
padding:4px;
}
So, this is all thats needed to be done.. One final question: How does this stuff work?? 5 CSS attributes are used in this formatting.. background-color attribute changes the color of the frame (this div background basically).. border-bottom and border-right adds shadow like effect to the frame.. The padding is for the frame width.. border-width is for the shadow width..
Hope u enjoyed this simple tutorial..
Best of luck with your designing experience..

Comments (1)

vineetJune 9th, 2008 at 11:14 am

yo ujju..macha rahe ho

Leave a comment

Your comment