CSS : Create a custom border

The main problem for a UI developper could be to create custom corner.
With Kuix, it is very easy to create custom borders.

After reading this guide, you will be able to create custom border as you wish to.

Basics examples

Single repeat image

The simplest way to do a custom border is like this:

button {
    border: 7;
    border-image: url(rhumbusborder.png);
}

The border property define the width of the border (in this example, it's 7 pixels width). Because this property contains only 1 value, the width will be applied to all border area (top, right, bottom, left).
You can specify custom width for example: border: 3 6 2 3;. The border-image can be used in many ways. The simplest is only one image wich will be repeated all around the border and provide something like this:

The border image (rhumbusborder.png ) is one rhombus.

Multiple image

Let's try on a rounded corner button composed of all these images:
btn_top.png:
btn_topright.png:
btn_right.png:
btn_bottomright.png:
btn_bottom.png:
btn_bottomleft.png:
btn_left.png:
btn_topleft.png:
btn_center.png:

The CSS contains an attributes wich ease use of these images : border-image.

button {
    border: 4;
    bg-image: url(btn_center.png);
    border-image: url(btn_top.png) url(btn_topright.png) url(btn_right.png) url(btn_bottomright.png) url(btn_bottom.png) url(btn_bottomleft.png) url(btn_left.png) url(btn_topleft.png);
}

 

You just have to specify to the border-image style property, the images part files. The order is clockwise.

It results in:

Single cropped image

Multiple files could be interesting when you want a maximum readable code. The problem is that PNG, JPG or GIF files header and palette are uselessly repeated. In this condition, it could be a good solution to reduce the number of file (wich makes file seeking easier) or it makes image modify easier too.

Here is the single image file of the button: .

To apply it to our border, you have to use the crop ability of url() statement:

button {
    border: 4;
    bg-image: url(btn.png,4,4,29,15);
    border-image: url(btn.png,4,0,4,15) url(btn.png,34,0,4,4) url(btn.png,34,4,4,15) url(btn.png,33,19,4,4) url(btn.png,4,19,29,4) url(btn.png,0,19,4,4) url(btn.png,0,4,4,15) url(btn.png,0,0,4,4);
}

 

This is very important to to keep in mind that you can't add space between parameters of the url() statement. border-images: url(btn.png, 4, 0, 4, 15) url(btn.png, 34, 0, 4, 4)... will not work as expected.

The parameters are composed like this:
url(ImagePath,x,y,width,height)
ImagePath: the path of the image (if no '/' start the path, then the file will be relative to '/img/').
x: the x offset of the area to keep. (x=0,y=0 is top-left of the image).
y: the y offset of the area to keep.
width: the width of the area to keep. height: the height of the are to keep.

Single cropped image easier

If you manually crop the image, it could be very unpleasant to cut the image and calculate crop values on each part.
Hopefully, Kuix contains another way to ease this:

button {
    border: 4;
    bg-image: url(btn.png,4,4,29,15);
    border-image: url(btn.png) 4 4 4 4;
}

 

It produces the same result but in an easier way than specifying every crop values.
The last 4 value specify:
the width of top's images.
the width of right's images.
the width of bottom's images.
the width of left's images.

Of course, you can use at the same time the url() statement crop and border-image 9-slice cut.

Takes notes that you can specify 0 to these values (then the side is not drawn).

Advanced examples

Border align

Here we will try to do a schmurtz ( a sort of extra part to our button ):

the first way is to do this like that:

button {
    border: 7 12 4 4;
    bg-image: url(btn_schmurtz.png,4,7,29,15);
    border-image: url(btn_schmurtz.png) 7 12 4 4;
}

 

But as you can see, the text is not centered and the content is under the right part.
So we will apply an align on border parts:

button {
    border: 7 4 4 4;
    bg-image: url(btn_schmurtz.png,4,7,29,15);
    border-image: url(btn_schmurtz.png) 7 4 4 4;
    border-align: right none none none none none none none;
}

 

The top part is align on the right of his area:

To prevent from repeat, the only way is to have a top image big enough:
Which gives: