Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Border Pictures in Html

Border Pictures in Html

Problem

Below picture is the part of my website which I need to display some data in each boxes.

I imagined each box as div, but I could not figure out how to make stitchy borders. I don't want to use the whole picture in the web site as it would be awkward.

What would be the best way of converting this pic into HTML?

Divs

Problem courtesy of: AnarchistGeek

Solution

You can use an image as a border with CSS3 by using border-image.

Here's an example, assuming that you have the cross saved as a single image*:

.crossBorder {
    border-width: 30px;
    -webkit-border-image:url(cross.png) 30 repeat stretch;
    -moz-border-image:url(cross.png) 30 repeat stretch;
    border-image:url(cross.png) 30 repeat stretch;
    padding: 30px;
}

*the single image would look something like this

Solution courtesy of: Matt

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Border Pictures in Html

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×