|
Handleiding HTML  Legenda | Voorbeelden | Randen | CSS eigenschappen | Begin
border-top-style
|
De border-top-style eigenschap bepaalt de stijl van de bovenrand van een element.
De waarden dotted, dashed, solid en double zorgen voor een vlakke rand. De kleur van de rand wordt bepaald door de border-top-color eigenschap, of bij het ontbreken daarvan door de voor het element geldende waarde van de color eigenschap.
Bij de waarden groove, ridge, inset en outset hebben de randen lichte en donkere delen en geven daardoor een 3-D effect. Het lichte deel is over het algemeen lichter en het donkere deel donkerder dan de kleur die is bepaald door de border-top-color eigenschap, of bij het ontbreken daarvan door de voor het element geldende waarde van de color eigenschap. Welke kleuren precies gebruikt worden voor de lichte en donkere delen hangt af van de browser.
De voor een inline element vastgelegde bovenrand heeft geen invloed op de regelhoogte. De rand kan daardoor de inhoud van het document boven het element overlappen.
Voorbeeld:
border-top-style: solid;
|
none
|
Er wordt geen rand weergegeven, ook niet als de border-width eigenschap voor het element is gebruikt met een andere waarde dan "0".
|
hidden
|
De waarde hidden heeft dezelfde betekenis als none, behalve wanneer er in een tabel met samenvallende tabelranden sprake is van conflicten tussen de stijlen van de verschillende tabelelementen.
|
dotted
|
De rand is een enkele vlakke lijn bestaande uit punten.
|
dashed
|
De rand is een enkele vlakke lijn bestaande uit streepjes.
|
solid
|
De rand is een enkele doorgaande vlakke lijn.
|
double
|
De rand is een dubbele doorgaande vlakke lijn.
De waarde die is opgegeven via de border-width eigenschap heeft betrekking op de som van de twee lijnen en de tussenruimte.
|
groove
|
De rand heeft in de lengterichting een lichter en een donkerder deel en lijkt in de achtergrond gesneden te zijn.
|
ridge
|
De rand heeft in de lengterichting een lichter en een donkerder deel (precies omgedraaid als bij de waarde groove) en lijkt uit de achtergrond te komen.
|
inset
|
De rand suggereert dat het element in de achtergrond is opgenomen.
|
outset
|
De rand suggereert dat het element uit de achtergrond komt.
|
inherit
|
De waarde van het parent element wordt aangehouden.
|
Bijzonderheden ondersteuning
- Microsoft Internet Explorer 4.0
- - De eigenschap wordt niet ondersteund voor inline elementen (maar wel voor het IMG element).
- - De eigenschap wordt niet ondersteund voor de elementen SELECT en OPTION.
- - De eigenschap wordt niet ondersteund voor een INPUT element, waarvan het TYPE attribuut de waarde "radio" of "checkbox" heeft (dus als het gaat om een keuzerondje of een aankruisvakje).
- - Wanneer de eigenschap wordt opgenomen voor het IFRAME element, dan dient de gedefinieerde rand niet als vervanging van de standaard 3-D rand van het inline frame, maar wordt hij er net buiten geplaatst. Om de 3-D rand te laten vervallen moet je voor het IFRAME element het FRAMEBORDER attribuut met de waarde "0" opnemen.
- Microsoft Internet Explorer 5.0
- - De eigenschap wordt niet ondersteund voor inline elementen (maar wel voor het IMG element).
- - De eigenschap wordt niet ondersteund voor de elementen SELECT en OPTION.
- - Wanneer de eigenschap wordt opgenomen voor het IFRAME element, dan dient de gedefinieerde rand niet als vervanging van de standaard 3-D rand van het inline frame, maar wordt hij er net buiten geplaatst. Om de 3-D rand te laten vervallen moet je voor het IFRAME element het FRAMEBORDER attribuut met de waarde "0" opnemen.
- Microsoft Internet Explorer 5.5
- - De eigenschap wordt niet ondersteund voor de elementen SELECT en OPTION.
- - Wanneer de eigenschap wordt opgenomen voor het IFRAME element, dan dient de gedefinieerde rand niet als vervanging van de standaard 3-D rand van het inline frame, maar wordt hij er net buiten geplaatst. Om de 3-D rand te laten vervallen moet je voor het IFRAME element het FRAMEBORDER attribuut met de waarde "0" opnemen.
- Microsoft Internet Explorer 6.0 en hoger
- - De eigenschap wordt niet ondersteund voor de elementen SELECT en OPTION.
- - Wanneer de eigenschap wordt opgenomen voor het IFRAME element, dan dient de gedefinieerde rand niet als vervanging van de standaard 3-D rand van het inline frame, maar wordt hij er net buiten geplaatst. Om de 3-D rand te laten vervallen moet je voor het IFRAME element het FRAMEBORDER attribuut met de waarde "0" opnemen.
- Netscape Navigator 7.0 en hoger | Mozilla | Firefox
- - De eigenschap wordt niet ondersteund voor het SELECT element.
- - De eigenschap wordt niet ondersteund voor een INPUT element, waarvan het TYPE attribuut de waarde "radio" of "checkbox" heeft (dus als het gaat om een keuzerondje of een aankruisvakje).
- Opera 3.5/3.6
- - Wanneer de eigenschap is opgenomen voor een inline element, dan worden de rand niet buiten de voor de inhoud benodigde ruimte geplaatst, maar erbinnen (de box houdt dezelfde hoogte). De rand kan daardoor de inhoud overlappen.
- - De eigenschap wordt niet ondersteund voor de elementen TABLE, TD, TH en CAPTION.
- - Wanneer de eigenschap is opgenomen voor de elementen UL of OL, dan wordt de linkerrand direct links van de inhoud van het LI element geplaatst (de markering staat dus buiten de rand).
- - De eigenschap wordt niet ondersteund voor de elementen SELECT, OPTION, INPUT en TEXTAREA.
- - De eigenschap wordt niet ondersteund voor het IMG element.
- Opera 4.0
- - Wanneer de eigenschap is opgenomen voor de elementen UL of OL, dan wordt de linkerrand direct links van de inhoud van het LI element geplaatst (de markering staat dus buiten de rand).
- - Wanneer de eigenschap wordt opgenomen voor de elementen SELECT, INPUT en TEXTAREA element, dan dient de gedefinieerde rand niet als vervanging van de standaard 3-D rand, maar wordt hij er net buiten geplaatst.
- - De eigenschap wordt niet ondersteund voor het OPTION element.
- Opera 5.0
- - Wanneer de eigenschap is opgenomen voor de elementen UL of OL, dan wordt de linkerrand direct links van de inhoud van het LI element geplaatst (de markering staat dus buiten de rand).
- - Wanneer de eigenschap wordt opgenomen voor de elementen SELECT, INPUT en TEXTAREA element, dan dient de gedefinieerde rand niet als vervanging van de standaard 3-D rand, maar wordt hij er net buiten geplaatst.
- - De eigenschap wordt niet ondersteund voor het OPTION element.
- - Wanneer voor de rand om een BUTTON element geen kleur is gedefinieerd, dan wordt niet de voor het element geldende waarde van de color eigenschap aangehouden maar grijs.
- - Wanneer de eigenschap wordt opgenomen voor het IFRAME element, dan dient de gedefinieerde rand niet als vervanging van de standaard 3-D rand van het inline frame, maar wordt hij er net buiten geplaatst. Om de 3-D rand te laten vervallen moet je voor het IFRAME element het FRAMEBORDER attribuut met de waarde "0" opnemen.
- Opera 5.1 t/m 6.0
- - Wanneer de eigenschap is opgenomen voor de elementen UL of OL, dan wordt de linkerrand direct links van de inhoud van het LI element geplaatst (de markering staat dus buiten de rand).
- - Wanneer de eigenschap wordt opgenomen voor de elementen SELECT, INPUT en TEXTAREA element, dan dient de gedefinieerde rand niet als vervanging van de standaard 3-D rand, maar wordt hij er net buiten geplaatst.
- - De eigenschap wordt niet ondersteund voor het OPTION element.
- - Wanneer voor de rand om een BUTTON element geen kleur is gedefinieerd, dan wordt niet de voor het element geldende waarde van de color eigenschap aangehouden maar grijs.
- - Wanneer de eigenschap wordt opgenomen voor het IFRAME element, dan dient de gedefinieerde rand niet als vervanging van de standaard 3-D rand van het inline frame, maar wordt hij er net buiten geplaatst. Om de 3-D rand te laten vervallen moet je voor het IFRAME element het FRAMEBORDER attribuut met de waarde "0" opnemen.
- Opera 7.0/7.1
- - De waarde inherit wordt niet ondersteund, maar dat betekent niet dat de eigenschap wordt genegeerd. De rand wordt onzichtbaar weergegeven en neemt, als gelijktijdig een breedte voor de rand is vastgelegd (bijvoorbeeld met de border-right-width eigenschap), toch de opgegeven ruimte in beslag.
- - Wanneer de eigenschap is opgenomen voor de elementen UL of OL, dan wordt de linkerrand direct links van de inhoud van het LI element geplaatst (de markering staat dus buiten de rand).
- - Wanneer de eigenschap wordt opgenomen voor de elementen SELECT, INPUT en TEXTAREA element, dan wordt voor de randen waarvoor geen stijl is gedefinieerd de waarde none van de border-style eigenschap aangehouden en dus helemaal geen rand weergegeven.
- - De eigenschap wordt niet ondersteund voor het OPTION element.
- - Wanneer voor de rand om een BUTTON element geen kleur is gedefinieerd, dan wordt niet de voor het element geldende waarde van de color eigenschap aangehouden maar grijs.
- - De browser heeft grote problemen met de weergave van randen voor het IFRAME element.
- Opera 7.2
- - De waarde inherit wordt niet ondersteund, maar dat betekent niet dat de eigenschap wordt genegeerd. De rand wordt onzichtbaar weergegeven en neemt, als gelijktijdig een breedte voor de rand is vastgelegd (bijvoorbeeld met de border-right-width eigenschap), toch de opgegeven ruimte in beslag.
- - Als de eigenschap is opgenomen voor een element op blokniveau dat standaard een margin boven het element heeft (zoals P, BLOCKQUOTE, Hx, UL, OL, DL en FORM), dan wordt deze margin ook weergegeven als het element het eerste element in de body van het document is.
- - Wanneer de eigenschap is opgenomen voor de elementen UL of OL, dan wordt de linkerrand direct links van de inhoud van het LI element geplaatst (de markering staat dus buiten de rand).
- - Wanneer de eigenschap wordt opgenomen voor de elementen SELECT, INPUT en TEXTAREA element, dan wordt voor de randen waarvoor geen stijl is gedefinieerd de waarde none van de border-style eigenschap aangehouden en dus helemaal geen rand weergegeven.
- - De eigenschap wordt niet ondersteund voor het OPTION element.
- - Wanneer voor de rand om een BUTTON element geen kleur is gedefinieerd, dan wordt niet de voor het element geldende waarde van de color eigenschap aangehouden maar grijs.
- - Wanneer voor de rand om een IFRAME element geen kleur is gedefinieerd, dan wordt niet de voor het element geldende waarde van de color eigenschap aangehouden maar grijs.
- Opera 7.5
- - Als de eigenschap is opgenomen voor een element op blokniveau dat standaard een margin boven het element heeft (zoals P, BLOCKQUOTE, Hx, UL, OL, DL en FORM), dan wordt deze margin ook weergegeven als het element het eerste element in de body van het document is.
- - Wanneer de eigenschap is opgenomen voor de elementen UL of OL, dan wordt de linkerrand direct links van de inhoud van het LI element geplaatst (de markering staat dus buiten de rand).
- - Wanneer de eigenschap wordt opgenomen voor de elementen SELECT, INPUT en TEXTAREA element, dan wordt voor de randen waarvoor geen stijl is gedefinieerd de waarde none van de border-style eigenschap aangehouden en dus helemaal geen rand weergegeven.
- - De eigenschap wordt niet ondersteund voor het OPTION element.
- - Wanneer voor de rand om een BUTTON element geen kleur is gedefinieerd, dan wordt niet de voor het element geldende waarde van de color eigenschap aangehouden maar grijs.
- - Wanneer voor de rand om een IFRAME element geen kleur is gedefinieerd, dan wordt niet de voor het element geldende waarde van de color eigenschap aangehouden maar grijs.
Legenda | Voorbeelden | Randen | CSS eigenschappen | Begin
Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 16 januari 2005
|
