Border i CSS forklart

Du har gitt elementene dine padding og kanskje justert farger, men noe mangler. Innholdet flyter sammen visuelt, og det er vanskelig å se hvor ett element slutter og et annet begynner. En border i CSS gir deg en synlig ramme rundt elementer. Med noen få egenskaper styrer du tykkelse, stil og farge, og du kan til og med runde av hjørnene. Border er en sentral del av boksmodellen, og når du forstår den, har du full kontroll over hvordan elementene dine rammes inn.

De tre egenskapene bak en border i CSS

En border bygges opp av tre separate egenskaper. border-width bestemmer tykkelsen. Du kan bruke nøkkelord som thin, medium og thick, eller sette en eksakt verdi som to pikseler. border-style bestemmer utseendet: solid gir en heltrukken linje, dotted gir prikker, dashed gir streker, og double gir en dobbel linje. border-color setter fargen, og du kan bruke alle fargeverdier CSS støtter.

Rekkefølgen du definerer disse i spiller ingen rolle når du bruker separate egenskaper. Men alle tre må ha en verdi for at rammen skal vises. Glemmer du border-style, vises ingen ramme i det hele tatt, selv om du har satt bredde og farge. Style er den eneste egenskapen som ikke har en synlig standardverdi.

Shorthand: definer alt på en linje

I stedet for å skrive tre separate egenskaper kan du bruke border som shorthand. Du skriver tykkelse, stil og farge i den rekkefølgen, atskilt med mellomrom. For eksempel gir verdien "2px solid black" en svart, heltrukken ramme på to pikseler. Som videoleksjonen viser, er dette den mest brukte metoden fordi den er kompakt og lettlest. Du trenger sjelden å definere egenskapene hver for seg med mindre du vil overstyre en enkelt egenskap senere.

Ulike sider, ulike rammer

Noen ganger trenger du forskjellig stil på forskjellige sider av et element. CSS lar deg definere hver side separat med border-top, border-right, border-bottom og border-left. Hver av disse aksepterer de samme tre verdiene som den vanlige shorthand-egenskapen. Du kan gi toppsiden en tykk rød ramme, høyresiden en grønn, bunnen en blå og venstresiden en lilla. Denne teknikken er nyttig for dekorative skillelinjer under overskrifter eller mellom seksjoner.

Du kan også kombinere den generelle shorthand med en enkelt side. Sett for eksempel border til en standard stil for alle sider, og overstyr bare bunnen med border-bottom. Da slipper du å gjenta verdier for de tre andre sidene.

Avrundede hjørner med border-radius

Skarpe hjørner passer ikke alltid designet. Med border-radius runder du av hjørnene, og egenskapen fungerer uavhengig av om elementet har en synlig border. Det betyr at du kan bruke border-radius på elementer med bare bakgrunnsfarge. En verdi på noen få pikseler gir myke hjørner. Setter du verdien til 50 prosent på et kvadratisk element, får du en perfekt sirkel. Du kan også sette ulike verdier for hvert hjørne med fire separate verdier: topp-venstre, topp-høyre, bunn-høyre og bunn-venstre.

Forskjellen på border og outline

CSS har også en egenskap som heter outline, og den kan se lik ut som border. Men det er en viktig forskjell: outline tar ikke opp plass i layouten. Den tegnes oppå innholdet uten å flytte noe. Outline brukes ofte for fokusindikatorer, for eksempel den blå ringen du ser rundt et skjemafelt når du klikker på det. Border derimot er en del av boksmodellen og påvirker elementets totale størrelse, noe du kan lese mer om i artikkelen om box-sizing.

Border og boksmodellens størrelse

Når du legger til border på et element, øker elementets totale bredde og høyde. Et element med bredde på 300 pikseler, padding på 20 pikseler og border på 2 pikseler blir totalt 344 pikseler bredt. Dette er standard oppførsel i CSS. Foretrekker du at border og padding inkluderes innenfor den oppgitte bredden, kan du endre dette med box-sizing: border-box. Les mer om hvordan dette fungerer i MDN sin dokumentasjon om border.