CSS Randafbeeldingen
Met de CSS border-image eigenschap kun je de randen voorzien van een afbeelding.Rand als afbeelding
Zoals je nu ziet is de rand zo ingesteld dat er een afbeelding wordt gebruikt rond de element.Randafbeeldingen toevoegen
Met de eigenschap border-image kun je een afbeelding opgeven die als rand van een element moet fungeren. Het ontwerp van de rand wordt gemaakt op basis van de zijkanten en hoeken van de afbeelding die is opgegeven. De afbeelding kan op verschillende manieren gesneden, herhaald, geschaald en uitgerekt worden zodat het past bij de grootte van het rand.
Voorbeeld:
#box {
padding: 20px;
border: 15px solid transparent;
border-image: url("images/border_image.png") 30 round;
}
In het volgende voorbeeld wordt de middelste deel van de afbeelding uitgerekt om de rand te creëren:
Voorbeeld:
#box {
padding: 20px;
border: 15px solid transparent;
border-image: url("images/border_image.png") 30 stretch;
}
 |
De optie round is een variant van de optie repeat waarbij de afbeeldingstegels zo worden verdeeld dat de uiteinden mooi met elkaar verbonden zijn. |
Verschillende waarden gebruiken
In de voorbeelden hieronder gebruiken we verschillende waarden om de uiterlijk van de randen te veranderen, zo kunnen we een rand creëren dat er mooi uitziet op je webpagina.border-image: url(border_img.png) 50 round;
border-image: url(border_img.png) 20% round;
border-image: url(border_img.png) 30% round;
Voorbeeld:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
