CSS kan worden gebruikt om de weergave van webpagina's te beheersen door middel van kleur, lettertype, lay-out, animatie en meer.
border:
Border is een css property die de rand van een element toont. Het kan gebruikt worden om een lijn, een dikte, een kleur en een stijl toe te voegen aan een element.Voorbeelden:
Toepassing:
<DIV style="border: 5px dashed #ccc;"> Voorbeeldtekst </DIV>border-bottom:
De border-bottom property definieert de stijl, dikte en kleur van de onderkant van een element. Dit kan worden gebruikt om een lijn toe te voegen onder een element. Het is ook mogelijk om een afbeelding als achtergrond te gebruiken.Voorbeelden:
Toepassing:
<DIV style="border-bottom: 6px groove #0000FF;"> Voorbeeldtekst </DIV>border-bottom-color:
border-bottom-color is een property die wordt gebruikt om de kleur van de border aan de onderkant van een element te definiëren. Deze property kan worden toegepast op alle elementen waarop een border kan worden toegepast.Voorbeelden:
Toepassing:
<DIV style="border-bottom-color: hsl(0, 100%, 50%);"> Voorbeeldtekst </DIV>border-bottom-left-radius:
De border-bottom-left-radius property maakt het mogelijk een afgerond hoekje aan de linkeronderhoek van een element te geven. Hierbij kunnen afgeronde hoeken worden gemaakt met verschillende radii, afhankelijk van de waarde die aan deze property wordt gegeven.Voorbeelden:
Toepassing:
<DIV style="border-bottom-left-radius: 20px;"> Voorbeeldtekst </DIV>border-bottom-right-radius:
De border-bottom-right-radius property stelt het ronde hoek van de rechter onderhoek van een element in. Hierdoor krijgt het element een afgeronde hoek in de rechter onderhoek.Voorbeelden:
Toepassing:
<DIV style="border-bottom-right-radius: 3vh;"> Voorbeeldtekst </DIV>border-bottom-style:
De border-bottom-style property definieert de stijl van de onderkant van een element. Het kan worden gebruikt om aan te geven of de lijn die de onderkant van het element omgeeft dik, dun, gestippeld, etc. is.Voorbeelden:
Toepassing:
<DIV style="border-bottom-style: outset;"> Voorbeeldtekst </DIV>border-bottom-width:
Border-bottom-width is een css property die de breedte van de onderkant van een border definieert. De breedte kan ingesteld worden tussen 0 en een maximum van de breedte van het element. De property kan een absolute waarde hebben in pixels, relatieve waarden in procenten van het element, of keyword waarden zoals thin, medium en thick.Voorbeelden:
Toepassing:
<DIV style="border-bottom-width: thick;"> Voorbeeldtekst </DIV>border-collapse:
De css property 'border-collapse' stelt de gebruiker in staat om aan te geven of de randen tussen cellen in een tabel samengevoegd of apart moeten worden weergegeven. Wanneer de property 'border-collapse' als 'collapse' ingesteld wordt, worden de randen samengevoegd, waardoor er geen dubbele lijnen tussen de cellen zullen zijn. Wanneer deze property als 'separate' ingesteld wordt, zullen de randen apart worden weergegeven en zullen er dubbele lijnen tussen de cellen zijn.Voorbeelden:
Toepassing:
<DIV style="border-collapse: separate;"> Voorbeeldtekst </DIV>border-color:
De border-color property bepaalt de kleur van de border van een element. Het is mogelijk om verschillende kleuren voor de border te definiëren voor de vier verschillende borders: top, right, bottom en left.Voorbeelden:
Toepassing:
<DIV style="border-color: hsl(0, 0%, 100%);"> Voorbeeldtekst </DIV>border-image:
De border-image property maakt het mogelijk om een afbeelding als border te gebruiken. De afbeelding wordt vervolgens herhaald of gesneden om de gewenste vorm te krijgen. Er worden vier waarden gebruikt om de border-image te specificeren; bron, breedte, stijl en herhaling.Voorbeelden:
Toepassing:
<DIV style="border-image: space;"> Voorbeeldtekst </DIV>border-image-outset:
De border-image-outset property definieert de afstand tussen de rand van het element en de rand van de afbeelding. De afstand wordt gemeten van de rand van de afbeelding naar de rand van het element. Deze afstand kan worden ingesteld in pixels of als een percentage van de breedte van de afbeelding.Voorbeelden:
Toepassing:
<DIV style="border-image-outset: auto;"> Voorbeeldtekst </DIV>border-image-repeat:
De border-image-repeat property bepaalt hoe de border-image moet worden herhaald. Border-image-repeat is een kortere manier om de individuele border-image-repeat-x en border-image-repeat-y eigenschappen te specificeren.Voorbeelden:
Toepassing:
<DIV style="border-image-repeat: space;"> Voorbeeldtekst </DIV>border-image-slice:
De border-image-slice property is een property die gebruikt wordt om te bepalen hoeveel pixels worden gebruikt om een border-image in te delen. Het is een afbeeldingsslice die gebruikt wordt om een afbeelding te knippen die wordt gebruikt als border. De border-image-slice property heeft 6 waarden die allemaal afzonderlijk opgegeven dienen te worden, de waarden geven aan hoeveel pixels van de afbeelding gebruikt mogen worden voor elke zijde van de border.Voorbeelden:
Toepassing:
<DIV style="border-image-slice: 20% 20% 20% 20%;"> Voorbeeldtekst </DIV>border-image-source:
Border-image-source is een CSS property die gebruikt wordt om de bron van een afbeelding te bepalen die gebruikt wordt als border. De afbeelding wordt verdeeld over de border en zal zich aanpassen als de grootte van het element veranderd.Voorbeelden:
Toepassing:
<DIV style="border-image-source: url(border.png);"> Voorbeeldtekst </DIV>border-image-width:
De border-image-width property is een shorthand-property voor een aantal andere properties die betrekking hebben op de breedte van een border-image. Het biedt een manier om meerdere breedte-waarden te specificeren voor elk van de zijden van de border-image.Voorbeelden:
Toepassing:
<DIV style="border-image-width: inherit;"> Voorbeeldtekst </DIV>border-left:
De border-left property definieert de breedte, stijl en kleur van de linkerzijde van een element;. Deze property kan ook gebruikt worden om een afbeelding te definieren als achtergrond van de linkerzijde.Voorbeelden:
Toepassing:
<DIV style="border-left: 10px double #FFFFFF;"> Voorbeeldtekst </DIV>border-left-color:
De border-left-color css property definieert de kleur van de linker rand van een element. Het wordt gebruikt om de linker rand van een element te kleuren.Voorbeelden:
Toepassing:
<DIV style="border-left-color: hsl(0, 100%, 50%);"> Voorbeeldtekst </DIV>border-left-style:
De border-left-style css property definieert de stijl van de linker rand van een element. Het wordt gebruikt om de linker rand van een element een specifieke stijl te geven.Voorbeelden:
Toepassing:
<DIV style="border-left-style: outset;"> Voorbeeldtekst </DIV>border-left-width:
De border-left-width css property definieert de dikte van de linker rand van een element. Het wordt gebruikt om de linker rand van een element een specifieke breedte te geven.Voorbeelden:
Toepassing:
<DIV style="border-left-width: thick;"> Voorbeeldtekst </DIV>border-radius:
border-radius is een eigenschap die het mogelijk maakt om de afgeronde hoeken van een element te definiëren. Het wordt gebruikt om de randen van elementen af te ronden.Voorbeelden:
Toepassing:
<DIV style="border-radius: 5% 10% 15% 20%;"> Voorbeeldtekst </DIV>border-right:
Border-right is een css-eigenschap die gebruikt wordt voor het definiëren van een rechterrand voor een element. Het wordt gebruikt om de breedte, stijl en kleur van de rand aan te passen.Voorbeelden:
Toepassing:
<DIV style="border-right: 5px dashed #FF0000;"> Voorbeeldtekst </DIV>border-right-color:
De border-right-color property specificeert de kleur van de rechter rand van een element.Voorbeelden:
Toepassing:
<DIV style="border-right-color: rgb(255, 0, 0);"> Voorbeeldtekst </DIV>border-right-style:
De border-right-style property bepaalt de stijl van de rechterrand van een element. Het definieert of een element een solide, geen, dubbele, gedashed, gedotted, of gegroefde rechterrand heeft.Voorbeelden:
Toepassing:
<DIV style="border-right-style: outset;"> Voorbeeldtekst </DIV>border-right-width:
De border-right-width property bepaalt de dikte van de rechterrand van een element. De dikte van de rand kan worden gespecificeerd met een absolute dikte (in pixels, pt, cm, etc), een relatieve dikte (in procenten) of met een van de vooraf gedefinieerde termen.Voorbeelden:
Toepassing:
<DIV style="border-right-width: thin;"> Voorbeeldtekst </DIV>border-spacing:
De border-spacing property bepaalt de afstand tussen twee naast elkaar gelegen cellen in een tabel. Deze afstand is alleen van toepassing als de tabel gebruik maakt van het border-collapse property met de waarde separate.Voorbeelden:
Toepassing:
<DIV style="border-spacing: 1em;"> Voorbeeldtekst </DIV>border-style:
De border-style property bepaalt de stijl van de randen van een element. Het definieert of een element een solide, geen, dubbele, gedashed, gedotted, of gegroefde rand heeft.Voorbeelden:
Toepassing:
<DIV style="border-style: outset;"> Voorbeeldtekst </DIV>border-top:
Border-top is een CSS-eigenschap die een bovenrand aan een HTML-element toevoegt. De bovenrand kan gevormd worden met dikte, kleur en stijl. De dikte, kleur en stijl van de bovenrand kunnen aangepast worden aan de vereisten van de gebruiker.Voorbeelden:
Toepassing:
<DIV style="border-top: 1px dashed #808080;"> Voorbeeldtekst </DIV>border-top-color:
De border-top-color CSS-eigenschap stelt de kleur van de bovenrand van een element in. Deze eigenschap is afhankelijk van de waarde van de border-style, of anders gezegd, als border-style niet op een waarde anders dan none is ingesteld, zal border-top-color geen effect hebben.Voorbeelden:
Toepassing:
<DIV style="border-top-color: rgba(255, 0, 0, 0.5);"> Voorbeeldtekst </DIV>border-top-left-radius:
De border-top-left-radius property bepaalt de hoek van de bovenlinker hoek van de elementen. Als je een vierkant element hebt, kun je deze instellen op verschillende hoeken en afgeronde hoeken, die worden gecreëerd door een combinatie van verschillende waarden.Voorbeelden:
Toepassing:
<DIV style="border-top-left-radius: 20px 30px;"> Voorbeeldtekst </DIV>border-top-right-radius:
De border-top-right-radius css-property definieert de afgeronde hoeken aan de rechterbovenhoek van het element. Deze eigenschap kan een waarde accepteren dat een absolute lengte of percentage is dat de radius van deze hoek beschrijft.Voorbeelden:
Toepassing:
<DIV style="border-top-right-radius: 10%;"> Voorbeeldtekst </DIV>border-top-style:
De border-top-style css-property definieert de stijl van de bovenste rand van een element. Een aantal mogelijke waarden zijn: none, hidden, dotted, dashed, solid, double, groove, ridge, inset en outset.Voorbeelden:
Toepassing:
<DIV style="border-top-style: dotted;"> Voorbeeldtekst </DIV>border-top-width:
De border-top-width property bepaalt de dikte van de bovenste rand van een element. De dikte kan ingesteld worden in pixels, procenten, em of andere eenheden. Als er geen waarde is ingesteld, dan is de waarde over het algemeen medium.Voorbeelden:
Toepassing:
<DIV style="border-top-width: 25px;"> Voorbeeldtekst </DIV>border-width:
De border-width property bepaalt de breedte van een element's border. De breedte kan worden gedefinieerd met verschillende eenheden, zoals pixels (px), punten (pt), centimeters (cm) of percentages (%);Voorbeelden:
Toepassing:
<DIV style="border-width: 5cm;"> Voorbeeldtekst </DIV>all:
De property all is een shorthand-property waarmee je alle andere eigenschappen van de elementen in de selectie kunt aanpassen. Alle eigenschappen die gereset worden door browsers, zoals margin, border, padding, font-style, font-variant en letter-spacing, worden geregeld door deze property.Voorbeelden:
Toepassing:
<DIV style="all: revert;"> Voorbeeldtekst </DIV>box-sizing:
box-sizing stelt ons in staat om de padding, border-width en content-width te definiëren voor het element waar deze property op wordt toegepast. Met deze property kunnen we de afmetingen van het element aanpassen zonder dat er fouten optreden.Voorbeelden:
Toepassing:
<DIV style="box-sizing: padding-box;"> Voorbeeldtekst </DIV>
preview
Responsive
https
Veilig
rocket
Snel