#border-image

Las Nuevas Reglas: CSS3 se Vuelve Loco CSS3 ha traído consigo una serie de propiedades y características que han revolucionado la forma en que diseñamos y animamos nuestras páginas web. Estas nuevas herramientas nos permiten crear interfaces de usuario más atractivas, interactivas y personalizadas. Exploremos algunas de las propiedades CSS3 más populares y cómo se están utilizando en Alicante y…

As discussed in the previous post about CSS3 (http://skjorrface.blogspot.it/2013/05/css3-what-is-it-and-whats-new.html), there are a lot of new features

that will let webmasters avoid the use of external programs such as Adobe Suite programs etc. One of these features is new css3 border properties: border-radius, box-shadow and border-image. Old border properties such as border-color are still available. Let's thus see some practical examples:

border-radius: this property lets you automatically choose the border "arching", you can, for example, specify it in pixel: border-radius: 10px; With that CSS3 instruction you will just "round" corners by 10 pixels. Obviously you can choose to round each of the four borders differently by typing this way: border-radius: 10px, 10px, 10px, 8px; Order from first to last attribute is top left, top right, bottom right, bottom left;

box-shadow: instead of putting heavy backgrounds on each wanted div or paragraph to have shadow effects, you can now just use this: box-shadow: 10px, 10px, 10px, 10px, #00000; first four attributes are horizontal and vertical length (of the shadow), third attribute describes how "blurred" your shadow must be and fouth one how much spread you want your shadow to be. #00000 is obviously the color we want the shadow to be. We can add "inset" like this box-shadow: inset, 10px, 10px, 10px, 8px, #00000; if we want to inset the shadow;

border-image: this is the easiest one to use but the most (in my humble opinion), powerful and useful: it allows you to choose a custom image as border: border-image: source, slice, width, outset, repeat. That was the syntax, a practical example is: border-image: url(customborder.jpg), 20, 25, repeat; You practically see what slice and outset and repeat parameters are for. 

A few days ago, Eric Meyer wrote a post on the CSS3 border-image property. Specifically, he wanted to know how you repeat a single image throughout the entire border. To put it simply, the border-image property doesn't seem to be designed to use a single image, rather it's designed to use a grid of images. So if you want a border of repeating diamonds instead of creating a single diamond image you need to create a grid like this:

And use the following syntax:

-webkit-border-image:url(grid.png) 5 / 5px repeat;

-moz-border-image:url(grid.png) 5 / 5px repeat;

But why can't you achieve the same effect with a single image?

You can, but only in WebKit browsers. Opera and Firefox will only display an image in the each corner of the box. To achieve the same effect with a single image in Chrome and Safari and you use the following syntax:

-webkit-border-image:url(single.png) 100% / 5px repeat;

In WebKit, if you specify the slice and border-width to be the same size as the image you can repeat the image around the border. No amount of messing with the syntax will create the same effect in Firefox and Opera.  You have to use a grid to achieve this effect. And here's the kicker: WebKit's implementation is based on "older and less mature version of the spec" so it isn't something that should be relied on.  You can view both versions of the syntax here.

Now that I (kind of) understand how the border-image property works I don't think it's too onerous to create a simple 3x3 grid to achieve the effect but having the flexibility to use a single image would be nice. That being said, I'm going to assume the WebKit will eventual adopt spec currently employed by Mozilla and Opera. I think this is just a case where the syntax just isn't that clear and assumptions (mine included) on how it works were a bit off.