Flexibel kader bestaande uit afbeeldingen rondom blok-element (border-image)

.

Linksboven links staat de voor de border-image gebruikte afbeelding, weergegeven als een gewone <img>

Linksboven midden staat een <div> die helemaal leeg is.

Linksboven rechts staat een <div> met daarin het kortste gedicht ooit: een punt.

Links van deze <div> (in smalle vensters hier gelijk onder) staat een <div> met een breedte van 300 px. De border-image is met behulp van border-image-outset aan de onderkant een stuk naar beneden verplaatst.

Deze <div> is 300 px breed.

De onderste <div> is 720 px breed (of maximaal even breed als het venster).

Met behulp van border-image-outset is de border-image onderaan een eind naar beneden gezet. De <div> zelf is nog steeds niet hoger dan de grijze achtergrond.

De gebruikte code: border: 29px solid black; border-image: url(111-pics/kader.png) 29 / 29px round;

De border is nodig, omdat anders de tekst ónder de border-image komt te staan.

border-image: url(111-pics/kader.png) 29 / 29px round; is een zogenaamde 'shorthand': meerdere eigenschappen gecombineerd tot één.

Als je dit uitsplitst naar de afzonderlijke eigenschappen, staat hier:

border-image-source: url(111-pics/kader.png);

border-image-slice: 29;

(border-image-slice 29; is ook weer een shorthand. Voluit is het border-image-slice: 29 29 29 29);

border-image-width: 29px;

(border-image-width 29px; is ook weer een shorthand. Voluit is het border-image-width: 29px 29px 29px 29px;)

border-image-repeat: round;

(border-image-repeat: round; is ook weer een shorthand. Voluit is het border-image-repeat: round round;)