CSS border-afbeelding eigenschap

Definitie en gebruik

De border-image eigenschap is een afkortingseigenschap die de volgende eigenschappen instelt:

Als de waarde wordt weggelaten, wordt de standaardwaarde ingesteld.

Tip:Gebruik de border-image-* eigenschappen om prachtige aanpasbare knoppen te maken!

Zie ook:

CSS3 handleiding:CSS3 rand

Voorbeeld

Maak de afbeelding van de rand van het div-element:

div
{
-webkit-border-image:url(border.png) 30 30 ronde; /* Safari 5 */
-o-border-image:url(border.png) 30 30 ronde; /* Opera */
border-image:url(border.png) 30 30 ronde;
}

Probeer het zelf uit

Er zijn meer voorbeelden onderin de pagina.

CSS syntaxis

border-image: source slice breedte uitstekend repeat|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving Test
border-image-source Het pad naar de afbeelding die wordt gebruikt in de rand.
border-image-slice De binnensubtractie van de afbeeldingsrand.
border-image-width De breedte van de afbeeldingsrand.
border-image-outset De hoeveelheid die de afbeeldingsrandregio over de rand heen uitsteekt.
border-image-repeat Of de afbeeldingsrand moet worden gecombineerd (herhaald), volledig (gerondeerd) of uitgerekt (uitgerekt). Test

Technische details

Standaardwaarde: geen 100% 1 0 stretch
Inheritantie: nee
Versie: CSS3
JavaScript syntaxis: object.style.borderImage="url(border.png) 30 30 ronde"

Meer voorbeelden

Border-image knop
Dit voorbeeld toont hoe je een knop kunt maken met behulp van de border-image-eigenschap.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-