CSS Borders


CSS Border Eigenschappen

Met de CSS border eigenschappen kunt u de stijl, breedte en de kleur van de grens van een element op te geven.

Ik heb een rand aan alle kanten.

Ik heb een rode onderkant rand.


Ik heb afgeronde randen.


Ik heb een blauwe linkse rand.


Style CSS Border

De border-style eigenschap geeft aan, wat voor soort rand er te zien is.

De volgende waarden zijn toegestaan:

  • dotted - Definieert een gestippelde grens
  • dashed - Definieert een gestreepte rand
  • solid - Definieert een rand
  • double - Definieert een dubbele rand
  • groove - Definieert een 3D-gegroefde grens. Het effect is afhankelijk van de border-color waarde
  • ridge - Definieert een 3D geribbelde rand. Het effect is afhankelijk van de border-color waarde
  • inset - Definieert een 3D-inzet grens. Het effect is afhankelijk van de border-color waarde
  • outset - Definieert een 3D begin grens. Het effect is afhankelijk van de border-color waarde
  • none - Definieert geen rand
  • hidden - Definieert een verborgen grens
  • De border-style eigenschap kan één tot vier waarden bevatten (de bovenrand, rechterrand, onderrand en linkerrand).

 

CSS Voorbeeld:

Demonstratie van de verschillende randstijlen:

 
 
p.dotted {border-style: dotted; }
p.dashed {border-style: dashed; }
p.solid {border-style: solid; }
p.double {border-style: double; }
p.groove {border-style: groove; }
p.ridge {border-style: ridge; }
p.inset {border-style: inset; }
p.outset {border-style: outset; }
p.none {border-style: none; }
p.hidden {border-style: hidden; }
p.mix {border-style: dotted dashed solid double; }
 
Resultaat:
 

Een dotted rand

Een dashed rand

Een solid rand

Een double rand

Een groove rand

Een ridge rand

Een inset rand

Een outset rand

Geen rand

Een hidden rand

Een mixed rand

 
   

Let op: Geen van de andere CSS rand hieronder beschreven zullen enig effect hebben, tenzij de border-style eigenschap is ingesteld!


CSS Border Width

De border-width eigenschap geeft de breedte van de vier randen.

De breedte kan worden ingesteld als een specifieke grootte (in px, pt, cm, em, etc.) of met één van de drie vooraf gedefinieerde waarden: thin, medium of thick.

De border-width eigenschap kan één tot vier waarden (de bovenrand, rechtergrens, onderste rand en de linker rand).

5px border-width

 

CSS Voorbeeld:

De achtergrondkleur van een pagina wordt ingesteld als volgt:

 
  p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 2px 10px 4px 20px ;
}
 
   

CSS Border Color

De border-color eigenschap wordt gebruikt om de kleur van de vier randen instellen.

De kleur kan worden ingesteld door:

  • naam - geef een kleur naam, zoals "red"
  • Hex - geef een hexadecimale waarde, zoals "# ff0000"
  • RGB - geeft u een RGB-waarde, zoals "rgb (255,0,0)"
  • transparant

De border-color eigenschap kan één tot vier waarden (de bovenrand, rechtergrens, onderste rand en de linker rand).

Als border-color niet is ingesteld, erft het de kleur van het element.

rode rand
 

CSS Voorbeeld:

De achtergrondkleur van een pagina wordt ingesteld als volgt:

 
  p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
}
 
   

CSS Border - Individuele Sides

Uit de voorbeelden hierboven je hebt gezien dat het mogelijk is om een andere rand op te geven voor elke kant.

CSS er ook te specificeren elk van de randen (boven, rechts, onder en links):

Verschillende randstijlen

 

CSS Voorbeeld:

 
 

p  {
 border-top-style: dotted;
 border-right-style: solid;
 border-bottem-style: dotted;
 border-left-style: solid;
}

 
   

Bovengenoemd voorbeeld geeft hetzelfde resultaat als volgt:

 

CSS Voorbeeld:

 
 

p  {
 border-top-style: dotted;
 border-right-style: solid;
 border-bottem-style: dotted;
 border-left-style: solid;
}

 
   

Dus, hier is hoe het werkt:

    Als de border-style eigenschap vier waarden heeft:
  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
    Als de border-style eigenschap drie waarden heeft:
  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
    Als de border-style eigenschap twee waarden heeft:
  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
    Als de border-style eigenschap één waarde heeft:
  • border-style: dotted;
    • all borders are dotted

De border-style eigenschap wordt gebruikt in het bovenstaande voorbeeld. Maar het werkt ook met border-width en border-color.


CSS Border - Shorthand Eigenschap

Zoals je kunt zien uit de bovenstaande voorbeelden, zijn er vele eigenschappen om te overwegen bij het omgaan met borders.

Om de code te verkorten, is het ook mogelijk om alle individuele border-eigenschappen op te geven in één eigenschap.

De bordereigenschap is een verkorte eigenschap voor de volgende afzonderlijke grens eigenschappen:

  • border-width
  • border-style (verplicht)
  • border-color
 

CSS Voorbeeld:

 
 
p {
border: 5px solid red;
}
 
Resultaat:
 

Beetje tekst

 
   

U kunt ook alle individuele rand eigenschappen voor slechts één kant op te geven:

 

Left Border

 
 
p {
border-left: 6px solid red;
  background-color: lightgray;
}
 
Resultaat:
 

Beetje tekst

 
   

 

Bottom Border

 
 
p {
border-bottom: 6px solid red;
  background-color: lightgray;
}
 
Resultaat:
 

beetje tekst

 
   

CSS Rounded Borders

De border-radius eigenschap wordt gebruikt om afgeronde randen toe te voegen aan een element:

Normale rand

Afgeronde rand 5px

Afgeronde rand 8px

Afgeronde rand 15px

 

CSS Voorbeeld:

 
 

p {
border: 2px solid red;
border-radius: 5px;
}

 
   

Opmerking: De border-radius eigenschap wordt niet ondersteund in IE8 en eerdere versies.


Meer Voorbeelden

Alle bovenste rand eigenschappen in één verklaring
Dit voorbeeld toont een shorthand-eigenschap voor het instellen van alle eigenschappen voor de bovenste rand in één aangifte.

Stel de stijl van de onderrand in
Dit voorbeeld laat zien hoe u de stijl van de onderrand instelt.

Stel de breedte in van de linkerrand
Dit voorbeeld laat zien hoe de breedte van de linkerrand moet worden ingesteld.

Stel de kleur in van de vier randen
Dit voorbeeld laat zien hoe de kleur van de vier randen moet worden ingesteld. Het kan één tot vier kleuren hebben.

Stel de kleur in van de rechtse rand
Dit voorbeeld laat zien hoe u de kleur van de rechterrand instelt.

Eigenschap Omschrijving
border Stel alle rand eigenschappen in één verklaring
border-bottom Stel alle bodem rand eigenschappen in één verklaring
border-bottom-color Stel de kleur in van de bodem rand
border-bottom-style Stel de stijl in van de bodem rand
border-bottom-width Stel de breedte in van de bodem rand
border-color Stel de kleur in van de vier randen
border-left Stel alle linkse rand eigenschappen in één verklaring
border-left-color Stel de kleur in van de linkse rand
border-left-style Stel de stijl in van de linkse rand
border-left-width Stel de breedte in van de linkse rand
border-radius Stel alle vier border-*-radius eigenschappen in voor ronde hoeken
border-right Stel alle rechtse rand eigenschappen in één verklaring
border-right-color Stel de kleur in van de rechtse rand
border-right-style Stel de stijl in van de rechtse rand
border-right-width Stel de breedte in van de rechtse rand
border-style Stel de stijl in van de vier randen
border-top Stel alle bovenste rand eigenschappen in één verklaring
border-top-color Stel de kleur in van de bovenste rand
border-top-style Stel de stijl in van de bovenste rand
border-top-width Stel de breedte in van de bovenste rand
border-width Stel de breedte in van de vier randen