HTML and CSS Reference
In-Depth Information
Using border-image to create common effects
Now you know enough to implement all three examples from the
beginning of this section. Let's take a single, fixed
—
size image and use
it to make elements that adapt in size to their contents yet retain a
sharp image at the edges for rounded
—
corner and bevel effects.
First, let's make some buttons and tabs. Here's a generic
image to provide the background for both.
Using this image, you can easily create buttons like these.
The code for the border image on each of these buttons is
border-width: 45px;
border-style: solid;
border-image: url('border4-bevel.png') 45 fill repeat;
Each button's text size is set individually, and each has a different
amount of text. Notice that the buttons aren't even the same shape as
the original image, but it has been adapted seamlessly.
Now let's use the same image to create some tabs.
To achieve tabs, you have to adjust one line of
CSS
from the previous
example. Set the bottom border width to
0
:
border-width: 45px 45px 0px 45px;
border-style: solid;
border-image: url('border4-bevel.png') 45 fill repeat;