CSS Academy · leksjon

Kantlinjestil, -bredde og -farge

Bruk kantlinjer med ulike stiler, bredder og farger ved hjelp av kort- og langformsegenskaper.

Leksjon 2 av 413 trinn

Kantlinjestil, -bredde og -farge er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Kortformen border

Kortformen border angir alle fire sidene samtidig: bredde, stil og farge.

<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>

Verdier for border-style

border-style må angis for at en border skal vises. Tilgjengelige verdier:

solid — sammenhengende linje
dashed — lange streker
dotted — runde prikker
double — to parallelle linjer
groove/ridge/inset/outset — 3D-effekter
none — ingen border (standard)

border-width

border-width godtar alle lengdeenheter eller nøkkelordene thin, medium og thick. Bruk tall for presisjon.

<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>

border-color

border-color godtar alle CSS-fargeverdier, inkludert RGBA for gjennomsiktighet. currentColor arver tekstfargen.

<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>

Border på individuelle sider

Angi border på bestemte sider med langformsegenskaper:

<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>

border-radius

border-radius avrunder hjørnene på elementer. Bruk én verdi for jevn avrunding eller opptil fire verdier for å styre hvert hjørne separat.

<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">&#9679;</div>
<div class="custom">Custom</div>

Elliptisk border-radius

Hver hjørneradius kan ha to verdier adskilt med / for asymmetrisk, elliptisk avrunding:

<div class="leaf"></div>

border-image

border-image erstatter border med et oppdelt bilde eller en gradient, slik at De kan lage dekorative border:

<div class="fancy">Gradient border image</div>

outline kontra border

outline tegner en linje utenfor border. I motsetning til border påvirker den ikke layouten eller dimensjonene til elementet. Den brukes ofte som fokusindikator for tastaturbruk.

<button class="focus-demo">Focused Button (demo)</button>

Fjerne outline: Vær forsiktig

Fjern aldri :focus-omriss uten å tilby en alternativ, synlig fokusindikator. Hvis fokusstilene fjernes, blir det vanskeligere for tastaturbrukere og skjermleserbrukere å bruke siden.

<button>Button without outline</button>
<a href="#">Link without outline</a>

border-collapse for tabeller

For HTML-tabeller slår border-collapse: collapse sammen tilstøtende cellekanter til én enkelt linje for et ryddigere utseende.

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

Hurtigsjekk

Hvilken CSS-egenskap tegner en linje utenfor border uten å påvirke elementets layout?

Besvar den i den interaktive leksjonen

Oppsummering

Kortformen border angir bredde, stil og farge. border-radius avrunder hjørner. outline er separat fra border — den påvirker ikke layouten og er avgjørende som fokusindikator for tilgjengelighet ved tastaturbruk.

Gratis å komme i gang

Lær deg CSS med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Kantlinjestil, -bredde og -farge» gratis?

Ja – hele teksten i «Kantlinjestil, -bredde og -farge» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Kantlinjestil, -bredde og -farge»?

Bruk kantlinjer med ulike stiler, bredder og farger ved hjelp av kort- og langformsegenskaper. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Kantlinjestil, -bredde og -farge»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?

Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Forstå width, height, margin og padding
Kantlinjestil, -bredde og -farge
Box-sizing: Content-Box kontra Border-Box
Outline og Box-Shadow

← Tilbake til CSS Academy