Decorating the Web with CSS Border Images

Previously, adding decorative elements to web pages (such as fancy borders) required slicing the image and patiently adjusting the CSS code until the effect was satisfactory.

CSS now simplifies this process. Just a few lines of code to add rather complex borders to your website. This article will show you how to do this.

Key points

• CSS allows adding complex borders to web pages with just a few lines of code, including adding background images on the border using the border-image-source property.
• border-image-slice Properties apply the selected image to the border, dividing the image into nine areas: four corners, four sides, and one middle area. You can choose to specify one to four numbers or percentage values ​​for the offset. .
• border-image-width Properties design the internal offset within the border image area, while the border-image-outset property allows the border image area to be pushed outside the border frame.
• You can use the abbreviation border property to reset the border-image property, which quickly resets the width, color, and style of all four borders of an element. At the time of writing, border-image is fully supported in almost all major browsers.

Border image properties

A common method of setting border styles is to use preset border-style rules. These rules include: dotted, dashed, solid, double, groove, ridge, inset, outset,

and

.

These styles already offer quite a few options. However, you can go a step further and use the following CSS properties to add an attractive background image to the border. border-image-source

Attributes

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

Use this property, you can assign a background image to the border of an element. This value is usually the URL of the image:

<code class="language-css">element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}</code>

You will find that the CSS gradient effect is just as good:

In the browser, it looks like this: noneborder-style If you set this property to a border-style value, or the image cannot be displayed, the browser will use the value set for the

property. Therefore, it is best to use

as a backup plan.

The image you are using does not need to match the width and height of the border. The beauty of CSS border images is that you only need a small image to decorate element borders of any width and height, including elements that adapt to different screen sizes. border-image-slice

Attributes border-image-source border-image-sliceAfter selecting an image with the

property, you can use the property to apply it to the border.

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

Let's learn more in more detail. This property design comes from the internal offsets on the top, right, bottom, and left. These offsets will eventually cut your small image into nine areas: four corners, four sides, and one middle area.

You can specify one to four numbers or percentage values. When you specify four values, they are applied to the top, right, bottom, and left offsets. If you skip the left offset, this will be the same as the right one. If you missed the bottom offset, this will be the same as the top. Omitting the value of the offset to the right will make it the same as the top. If you only use one value, it will be used for all four offsets.

Percentage value refers to the percentage of image size—the image width of the horizontal offset and the image height of the vertical offset.

Numbers represent pixels in the image, or in the case of vector images, coordinates. Another point, don't add px after the number, this won't work!

The following is how you can use border-image-slice:

<code class="language-css">element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}</code>

<code class="language-css">element {
  border-image-slice: 19;
}</code>

Use an image of size 100 x 100 pixels as the border, and its appearance is as follows:

The final effect is as follows:

The middle area appears completely transparent and is therefore invisible. If you want to make it visible, add the fill keyword.

For example, using an image with a completely opaque middle area without adding the fill keyword will be exactly the same as the example above. However, please apply the fill keyword as follows:

<code class="language-html"><div class="box">
  Border Image
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div></code>

Use an image containing details in the middle area:

Then we find that the middle area of ​​the image is completely visible on the page, albeit a little blurry and compressed:

border-image-width Attributes

This property is drawn within the so-called border image area. By default, the boundary of this area is the boundary of the border box. Like the border-image-slice property, border-image-width designs internal offsets, dividing the image into nine areas.

This property accepts one to four values ​​(top, right, bottom, left) and can use numbers or percentages. The percentage is relative to the size of the border image area, i.e. the area width of the horizontal offset and the area height of the vertical offset. If you use numbers without px units, these numbers will equal multiples of the corresponding calculated border width. For example, the following code:

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

…Set the width of the border image to 3 times the border width value, i.e. 19 pixels. The results are as follows:

I found that assigning the same value to the border-image-width and border-image-slice properties ensures that your border image is displayed in the best condition without unwanted deformation.

border-image-outset Attributes

All the properties I've used so far have defaulted to the embedded border image area. However, you can choose to push the border image area outside the border box. You can use the border-image-outset attribute to implement it.

This property takes one to four values ​​(top, right, bottom, left) and is expressed in numbers or units of length (such as px, em, etc.). If you use numbers, the result will be that the border image is pushed outside the border box, with multiples being the calculated border width.

To further illustrate, I have drawn a green dotted outline to represent the border. The border image area contains a pink border image. In its default embedded state, the border image is located within the green outline. This means that the border image area is within the border frame.

Adding border-image-outset: 19px; to the CSS rule set pushes the pink border image beyond the dotted green outline. This means that the border image area is drawn outside the border:

Please note that the border image part located outside the border box will not trigger scrolling, nor will the mouse event be captured.

border-image-repeat Attributes

This property provides some choices about how to scale and tile image slices on the sides and middle sections of the border. The first value is applied to the horizontal side (top and bottom) and the second value is applied to the vertical side (right and left). If you set only one value, the value will be applied to both horizontal and vertical sides.

Available values ​​include:

• stretch – If you do not use the border-image-repeat attribute, this is the default value. This keyword stretches the image to fill the available area.
• repeat – Image tiling repeats to fill the available area. If the available area cannot be divisible by the tiled width, the image may be cut off.
• round – Same as repeat, but if the space is not enough to accommodate tiles, the tiles are scaled until they all fit. This ensures that the tiling will never be cut off, but the image may look a bit compressed.
• space – Same as repeat, but if the space is not an exact multiple of the tile width, the extra white space will be evenly distributed around each tile.

As of this writing, Firefox appears to render space as the same as stretch, while Chrome renders space as the same as repeat.

border-image Abbreviation attributes

You can compress all the individual properties discussed above into border-image abbreviation properties as follows:

1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-outset
5. border-image-repeat

The following is a code snippet:

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

What should I do if I want to delete the border image?

The best way to reset the border is to use the abbreviation border attribute. Using border, you can quickly reset the same width, color, and style of all four borders of an element. There is no need to specify a border-image: none rule, nor do you need to override any single border-image attribute.

Browser support

At the time of writing, border-image is fully supported in almost all major browsers. Only Firefox cannot stretch SVG images across elements, Opera Mini supports abbreviation syntax with the -o- prefix, but does not support a single attribute.

Conclusion

This article mainly introduces the border-image attributes: the values ​​it accepts, the best way to use, and the browser support level at the time of writing.

You can find more details in the CSS Background and Border Level 3 specification documentation.

If you use the border-image attribute in your project, why not share the end result with the community?

Looking forward to your reply!

FAQs (FAQ) on Decorating Web Pages with CSS Border Images

How to create CSS border images?

Creating a CSS border image involves using the border-image attribute. This property allows you to specify an image that is used as the border around the element. The syntax of this property is as follows:

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

source is the URL of the image you want to use. slice Defines the inner offset of the image. width Sets the width of the border. outset Determines the distance from the border image area beyond the border. repeat Specifies how the image is tiled or repeated.

What are the different border styles in CSS?

CSS provides several border styles that you can use to customize the appearance of web elements. These include: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, dotted, double,

and

. Each style produces a different visual effect. For example,

creates a border with series of dots, while

creates a double-line border. inset

How to create embedded borders using CSS?

<code class="language-css">element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}</code>

Inline borders can be created in CSS using the

border style. This style makes the box look like it is embedded in the page. The syntax is as follows:

border-top-style border-right-style Can I use different border styles for different sides of an element? border-bottom-style border-left-styleYes, CSS allows you to apply different border styles to different sides of an element. You can specify the styles on each side using the

,

,

, and

properties. border-image-width

How to control the size of CSS border image?

The

property can be used to control the size of the CSS border image. This property sets the width of the border image by defining the size of the border area. You can specify width in pixels or as a percentage of the element box. linear-gradient border-imageCan I use gradient images as borders in CSS?

Yes, CSS allows you to use gradient images as borders. You can create a gradient image using the

function and then use it as a border image using the

property. border-image-repeat stretchHow to make my CSS border image repeat? repeat round The space attribute in CSS controls how border images are repeated. Possible values ​​are stretch (default), repeat, round, and space.

Scale the image to fill the area.

Tile image. border Tile the image, but scale it to match exactly. border-image Tile the image, but leave space between the tiles.

What is the difference between the

attribute and the border attribute in border-image CSS?

The attribute in CSS is used to set the style, width, and color of the element border. On the other hand, the property allows you to use an image as a border around an element.

Can I use CSS border images with rounded corners?

Yes, you can use CSS border images with rounded corners. You can create rounded corners using the border-radius property, and then apply the border image using the border-image property.

How to create a dotted border in CSS?

Dashed borders can be created in CSS using the dashed border style. The syntax is as follows:

<code class="language-css">element {
  border-image-source: url('myimage.png');
}</code>

This will create a border with series of short lines or dotted lines.

The above is the detailed content of Decorating the Web with CSS Border Images. For more information, please follow other related articles on the PHP Chinese website!