border

Siden er opdateret 15. 12. 2011

Ved at definere border på et elementet - f.eks. en <div> - kan man nøjes med at sætte border-fællesbetegnelsen og derefter tage de tre obligatoriske værdier:

div{
border: 1px solid #ccc
}

Værdierne skal sættes i viste rækkefølge.


Skal et element tildeles forskellig border på de fire sider, kan man vælge at definere hver enkelt side komplet for sig:

div {
border-top: 1px solid red;
border-right: 2px solid red;
border-bottom: 3px solid red;
border-left: 4px solid red;
}

Det giver, som du kan regne ud, en rød border, der i i toppen er 1px bred, i højre side 2px, i binden 3px og i venstre side 4px bred. Men det kan forenkles:

div {
border: 1px 2px 3px 4px solid red;
}

Tænk på et ur og sig 0-3-6-9. Så har du den rækkefølge, hvori de enkelte sider skal noteres, hvis det skal forkortes som her.

På tilsvarende måde kan der sættes forskellige farver på de fire sider (eller forskellig bordertype):

div {
border: 2px solid red blue green yellow;
}

... giver en border 2px bred, rød i toppen, blå i højre side, grøn i bunden og gul i venstre side.

Se mere om border-style på siden border-style og En ny side fra grunden - indramning.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2003
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - border
sidens top
Brugere lige nu: 1
Home Mail