|
Handleiding HTML  Legenda | Voorbeelden | Randen | CSS eigenschappen | Begin
border
|
De border eigenschap bepaalt in één keer de breedte, stijl en kleur van alle randen van een element.
Het is niet nodig de drie waarden <'border-width'>, <'border-style'> en <'border-color'> gezamenlijk op te nemen. Wanneer een waarde ontbreekt, wordt de beginwaarde van de betreffende eigenschap aangehouden.
De border eigenschap kan niet gebruikt worden om voor elk van de vier randen (boven, rechts, onder en links) een eigen breedte, stijl of kleur vast te leggen. Wanneer je dat wel wilt, dan moet je gebruik maken van andere eigenschappen voor randen.
De voor een inline element vastgelegde boven- en onderrand heeft geen invloed op de regelhoogte. De rand kan daardoor de inhoud van het document boven en onder het element overlappen.
Voorbeeld:
border: 1px solid #336699;
|
<'border-width'>
|
De waarde bepaalt de breedte van de rand aan alle vier zijden van het element.
Zie voor een toelichting de beschrijving van de border-width eigenschap.
|
<'border-style'>
|
De waarde bepaalt de stijl van de rand aan alle vier zijden van het element.
Zie voor een toelichting de beschrijving van de border-style eigenschap.
|
<'border-color'>
|
De waarde bepaalt de kleur van de rand aan alle vier zijden van het element.
Zie voor een toelichting de beschrijving van de border-color eigenschap.
|
inherit
|
De waarde van het parent element wordt aangehouden.
|
Bijzonderheden ondersteuning
- Microsoft Internet Explorer 4.0
- - De waarde inherit wordt niet ondersteund, maar dat betekent niet dat de eigenschap wordt genegeerd. In plaats van een eventueel eerder voor het element gedefinieerde stijl wordt de beginwaarde none van de border-style eigenschap aangehouden en dus helemaal geen rand weergegeven.
- - De eigenschap wordt niet ondersteund voor inline elementen (maar wel voor het IMG element).
- - Wanneer bij een ongeordende lijst de eigenschap is opgenomen voor de elementen UL of LI, dan wordt de linkerrand op de gebruikelijke positie van de markering geplaatst en schuiven de markering en de linkerkant van de inhoud van het LI element naar rechts.
- - Wanneer bij een geordende lijst de eigenschap is opgenomen voor de elementen OL of LI, dan wordt de linkerrand bovenop de markering geplaatst.
- - 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 waarde inherit wordt niet ondersteund, maar dat betekent niet dat de eigenschap wordt genegeerd. In plaats van een eventueel eerder voor het element gedefinieerde stijl wordt de beginwaarde none van de border-style eigenschap aangehouden en dus helemaal geen rand weergegeven.
- - De eigenschap wordt niet ondersteund voor inline elementen (maar wel voor het IMG element).
- - 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 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 waarde inherit wordt niet ondersteund, maar dat betekent niet dat de eigenschap wordt genegeerd. In plaats van een eventueel eerder voor het element gedefinieerde stijl wordt de beginwaarde none van de border-style eigenschap aangehouden en dus helemaal geen rand weergegeven.
- - 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 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
- - 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 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 4.x
- - Wanneer de eigenschap is opgenomen voor inline elementen, dan worden deze behandeld als elementen op blokniveau.
- - De rand wordt niet om het hele rechthoekige oppervlak van een element op blokniveau (zoals P, BLOCKQUOTE, Hx en FORM) weergegeven, maar alleen om de inhoud.
- - De waarde none van de border-style eigenschap maakt de rand slechts onzichtbaar. Als gelijktijdig een breedte voor de rand is vastgelegd (bijvoorbeeld met de border-width eigenschap), dan neemt de rand de opgegeven ruimte toch in beslag.
- - Wanneer de border-style eigenschap niet is opgenomen, maar wel een breedte voor de rand is vastgelegd (bijvoorbeeld met de border-width eigenschap), dan wordt de rand toch weergegeven. In plaats van de beginwaarde none wordt de waarde solid aangehouden.
- - Wanneer de border-width eigenschap niet is opgenomen, maar wel een stijl voor de rand is vastgelegd (bijvoorbeeld met de border-style eigenschap), dan wordt de rand niet weergegeven. In plaats van de beginwaarde medium wordt de waarde "0" aangehouden.
- - 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 weergegeven op de plaats waar normaal de inhoud van het LI element begint. De linkerzijde van het LI element verplaatst daarbij naar rechts. De markering schuift binnen de rechthoekige ruimte waarin de inhoud van het LI element staat (zoals bij de waarde inside van de list-style-position eigenschap) en is bovendien in alle gevallen een klein symbool, ongeacht de waarde van de list-style-type eigenschap.
- - Het opnemen van de eigenschap voor verschillende elementen voor lijsten (LI, DT of DD), formulieren (SELECT, OPTION, INPUT en TEXTAREA), afbeeldingen (IMG) en hyperlinks (A) heeft vaak dramatische gevolgen. Soms (bij LI, DT, DD, INPUT en IMG) wordt de rand niet aangehouden voor het element zelf, maar wordt erboven of eronder een kleine lege box geplaatst met de opgegeven rand. In andere gevallen (bij SELECT, OPTION, TEXTAREA en A) verliest het element zijn functie (en is het niet meer mogelijk er een optie uit de lijst te selecteren, tekst in te voeren, of naar het volgende document te gaan).
- - Wanneer de border-style eigenschap met de waarde none wordt opgenomen voor een in een hyperlink opgenomen IMG element, dan is het resultaat niet dat de rand om een afbeelding achterwege blijft.
- Netscape Navigator 6.0 t/m 6.2
- - Wanneer er geen kleur is vastgelegd voor de randen van de elementen INPUT, TEXTAREA, SELECT of BUTTON, dan wordt een licht grijze kleur aangehouden.
- Netscape Navigator 7.0 | Mozilla 1.0/1.1
- - De waarden border-width en border-style worden niet ondersteund voor het SELECT element. De waarde border-color wordt wel ondersteund, maar in plaats van de opgegeven kleur wordt een lichtere versie ervan aangehouden.
- - De waarden border-width en border-style worden 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). De waarde border-color wordt wel ondersteund, maar in plaats van de opgegeven kleur wordt een lichtere versie ervan aangehouden.
- - Wanneer er geen kleur is vastgelegd voor de randen van de elementen INPUT, TEXTAREA en BUTTON, dan wordt een licht grijze kleur aangehouden.
- Netscape Navigator 7.01/7.02 | Mozilla 1.2
- - De waarden border-width en border-style worden niet ondersteund voor het SELECT element. De waarde border-color wordt wel ondersteund, maar in plaats van de opgegeven kleur wordt een lichtere versie ervan aangehouden.
- - 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 er geen kleur is vastgelegd voor de randen van de elementen INPUT, TEXTAREA en BUTTON, dan wordt een licht grijze kleur aangehouden.
- Netscape Navigator 7.1 en hoger | Mozilla 1.3 en hoger | 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).
- - Wanneer er geen kleur is vastgelegd voor de randen van de elementen INPUT, TEXTAREA en BUTTON, dan wordt een licht grijze kleur aangehouden.
- Opera 3.5/3.6
- - 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 het CAPTION element, dan bestaat de kans dat het bijschrift over de rechterrand heen loopt (de box van het bijschrift krijgt de breedte van de tabel, ook al is voor het langste woord meer ruimte nodig).
- - 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. In plaats van een eventueel eerder voor het element gedefinieerde stijl wordt de beginwaarde none van de border-style eigenschap aangehouden en dus helemaal geen rand weergegeven.
- - Wanneer de eigenschap is opgenomen voor het CAPTION element, dan bestaat de kans dat het bijschrift over de rechterrand heen loopt (de box van het bijschrift krijgt de breedte van de tabel, ook al is voor het langste woord meer ruimte nodig).
- - 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 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. In plaats van een eventueel eerder voor het element gedefinieerde stijl wordt de beginwaarde none van de border-style eigenschap aangehouden en dus helemaal geen rand weergegeven.
- - 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 het CAPTION element, dan bestaat de kans dat het bijschrift over de rechterrand heen loopt (de box van het bijschrift krijgt de breedte van de tabel, ook al is voor het langste woord meer ruimte nodig).
- - 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 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 het CAPTION element, dan bestaat de kans dat het bijschrift over de rechterrand heen loopt (de box van het bijschrift krijgt de breedte van de tabel, ook al is voor het langste woord meer ruimte nodig).
- - 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 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
|
