RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/border-image-source below:

border-image-source · WebPlatform Docs

border-image-source Summary

The property border-image-source is used to set the image to be used instead of the border style. If this is set to none the border-style is used instead.

Overview table

Initial value: none
Applies to: all elements, except table elements where border-collapse: collapse is applied
Inherited: No
Media: visual
Computed value: ‘none’ or the image with its URI made absolute
Animatable: No
CSS Object Model Property: borderImageSource
Percentages: N/A

Syntax

border-image-source: none
border-image-source: url(path/to/image.png)

Values

none: Default. border-style is used instead.
url(path/to/image.png): This value contains a path to an image that you want to apply to the element in question as a background image, using the CSS images syntax, as described at "CSS images: url()".

Examples

A simple example showing a <div> that has border-image-source property and other border-image properties.

<div class="pattern">border-image</div>

View live example


div {
    height: 100px;
    width: 100px;
    margin: 25px;
    text-align: center;
    line-height: 100px;
    font-family: sans-serif;
}


.pattern {
    border-image-source: url(/docs/w/images/d/d8/border-image.png);
    border-image-slice: 30;
    border-image-width: 6;
    border-image-outset: 3;
}

View live example

Related specifications

CSS Level 3 - Backgrounds and Borders Module: W3C Candidate Recommendation