Double Border with CSS


I am certain that I am not the only one to be bored of classic borders of CSS. For example, if you give border to a photo, it becomes either juxtaposed or it seems very démodé and you can never show it in the way you want.

I am sharing a code which I have been using for long and which I trust in its aesthetic.

.doubleborder {border: 1px solid #66CCCC; padding: 3px; background: #fff;}
.doubleborder: hover { background: #66CCCC; }


As in the example, we ordinarily add border, 1px weight to our element. Then we provide whitespace, 3px weight with padding within our element. Finally, we set the background colour of this element so that is does not seem transparent.

Second line is a very good example of the use of Pseudo (What is Pseudo?). We set the effect which forms when we come over the element with mouse in this line.

Example is functioning in image closest to you! You can use and improve these codes; if you wish, you can change and zoom double border colour…

You can leave a response, or trackback from your own site.

Leave a Reply

You must be logged in to post a comment.