Skip to main content

Understanding border-image

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today’s browsers.

The basic idea

The border-image shorthand property has 3 parts:

border-image: url(border-image.png) 25% repeat;



Essentially, these allow you to specify:

1. An image to use as the border
2. Where to slice that image, dividing the image into 9 sections
3. How the browser should apply those sections to the edges of your element

The pertinent details

Let’s look at each part of the process in a little more detail. The first part is easy, and is familiar from the background-image property. For demonstration purposes I’ll use this image, which is 100px x 100px:



Slicing your image

The second part can have from one to four values, much like the border-width property, and they are specified in the same order: top, right, bottom, left. You can use percentages or pixels. Strangely, the percentages require the “%”, while pixels should be listed without the “px”:

border-image: url(my-image.gif) 25% 30% 10% 20% repeat;
border-image: url(my-image.gif) 25 30 10 20 repeat;

In this case, since my image is 100px x 100px, the two rules above are equivalent – they slice the image in the same places. I’ve added some dimensions on my image to demonstrate:



Repeat, Round, Stretch

border-image will always place the corner sections of your image into the corresponding corners of your element box, but the third part of the shorthand rule tells the browser how to treat the middle sections of your image — the ones that will go along the edges of your element. Repeat (repeat, or tile, the image) and stretch (stretch, or scale, the image) are pretty self-explanatory. Round means tile the image but only so that a whole number of tiles fit, and otherwise scale the image. Right now, Safari and Chrome interpret round as repeat. There can be up to two values: one for the top and bottom edges of the element, and one for the left and right. Here’s an example with the top/bottom value set to repeat, and the left/right value set to stretch:

#example-one {
border-width:25px 30px 10px 20px;
-moz-border-image:url("border-image.png") 25 30 10 20 repeat stretch;
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat stretch;
border-image:url("border-image.png") 25 30 10 20 repeat stretch;
}



Border-width

border-image won’t do anything if you don’t specify a width for your border. For browsers that understand border-image, your image slices will be scaled to the specified width. If you use the border shorthand property, it provides a nice fallback for browsers that don’t:

#example-two {
border:50px double orange;
-moz-border-image:url("border-image.png") 25 30 10 20 repeat;
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat;
border-image:url("border-image.png") 25 30 10 20 repeat;
}



Or you can specify each width individually (in this example I’ve specified widths such that the image slices aren’t scaled at all):

#example-three {
border-color:orange;
border-style:double;
border-width:25px 30px 10px 20px;
-moz-border-image:url("border-image.png") 25 30 10 20 repeat;
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat;
border-image:url("border-image.png") 25 30 10 20 repeat;
}



Using a plain border at the same widths as your border-image won’t always be ideal, however, so you may want to use conditional stylesheets to give IE some different border styles altogether.

Source : http://css-tricks.com/understanding-border-image/#more-6883

Popular posts from this blog

Photo Optimization

Photo Optimization is necessary to allow a web page to load in the shortest amount of time possible. Fast loading time require small files. This article discusses the methods used for photo optimization. In an ideal world, a web designer could use the highest quality photos and have the webpage download lightening fast. Fast loading requires small file sizes for pictures. Unfortunately, there is a trade off between picture quality and file size. Web surfers are a notoriously impatient bunch. If a website takes too long to load, they will just click away and never come back. Computer monitors can only display images at 72dpi (dots per inch). So the first step in photo optimization is to reduce the resolution to 72 dpi. Large picture can be sliced up into smaller ones and the put back together on the web page. Each piece will be a very small file and together will load in a fraction of the time a single image file would load. Most graphic files contain information about the color palette...
Read more

Search Engine Optimization – How to Get the Best Rankings

Effective search engine optimization is absolutely crucial for any website proprietor that likes to boost their traffic. No issue how many promotion you location on other websites and in the press the best way to get a bigger number of exclusive tourists is through search engine rankings and online directories.The idea behind seo edinburgh is to make your world broad web falls as appealing as likely to the engine crawlers. You may have a attractively conceived website that comprises unbelievable images and a flawless layout for reading but this solely will not advance your search rankings, there are other components that are important.If you believe of the times when you use one of the foremost search engines you should inquire yourself how many distinct falls do you actually gaze through? It is rather uncommon for any individual to get to the fourth of fifth falls of the results. For creative search engine optimisation edinburgh your location desires to be on the very first page.There...
Read more

10 Tips on designing a fast loading web site

Seems to me like most web users (me included) are always in a hurry when browsing. Statistics show that, without a compelling reason, the average user will not wait for much more than 10 seconds for a page to load. So does that explain why your visitors seem to spend less than 5 seconds in your site? Probably your site is taking too long to load thus putting off visitors. As you design your site, loading time should always be a priority if your site is to be an effective business tool. Balancing usability and aesthetics is a delicate matter when creating a fast loading site. You can have a colourful website but takes ages to load while on the other hand you can design a simple site that loads faster than you can brink. Below are 10 tips and tricks that I have found very useful that you can use while designing your fast loading website. Read more: http://www.site-reference.com/articles/Website-Development/10-tips-to-creating-fast-loading-websites.html#ixzz0pmGVZEk6 1. Use images sparing...
Read more