CSS Outline

Dit element heeft een zwarte rand en een blauwe profiel, breedte van 10px.

CSS Outline

Het profiel is een lijn die wordt getekend omheen van het element, buiten de rand, om het element te benadrukken.

CSS heeft de volgende profielproperties:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Opmerking:Profiel metRandVerschillend! Het verschil zit in: het profiel wordt getekend buiten de rand van het element en kan mogelijk over andere inhoud lopen. Evenzo is het profiel geen deel van de afmetingen van het element; de totale breedte en hoogte van het element worden niet beïnvloed door de breedte van de profiellijn.

CSS profielformen

De outline-style-eigenschap specificeert het profielstijl en kan de volgende waarden instellen:

  • dotted - Definieer een stippenprofiel.
  • dashed - Definieer een gebroken lijnprofiel.
  • solid - Definieer een doorlopend lijnprofiel.
  • double - Definieer een dubbel lijnprofiel.
  • groove - Definieer een 3D inkepingprofiel.
  • ridge - Definieer een 3D groefprofiel.
  • inset - Definieer een 3D insteekprofiel.
  • outset - Definieer een 3D uitsteekprofiel.
  • none - Definieer geen profiel.
  • hidden - Definieer een verborgen profiel.

Het volgende voorbeeld toont verschillende outline-style waarden:

Voorbeeld

Demonstreer verschillende profielformen:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Resultaat:

Puntprofiel.

Dunne lijnprofiel.

Dikke lijnprofiel.

Dubbele lijnprofiel.

3D ingesneden randprofiel. Dit effect hangt af van de outline-color waarde.

3D uitgesneden randprofiel. Dit effect hangt af van de outline-color waarde.

3D ingesneden randprofiel. Dit effect hangt af van de outline-color waarde.

3D afgeplatte randprofiel. Dit effect hangt af van de outline-color waarde.

Probeer het zelf uit

Opmerking:tenzij ingesteld outline-style Eigenschappen, anders hebben andere outline-eigenschappen (die in het volgende hoofdstuk worden uitgebreid besproken) geen effect!