CSS border-color egenskab

Definition og brug

border-color egenskaben sætter farven på de fire kanter af rammen. Denne egenskab kan sætte 1 til 4 farver.

border-color egenskaben er en kortformsegenskab, der kan sætte farven på den synlige del af alle kanter af et element, eller sætte forskellige farver for de fire kanter. Se nedenstående eksempel:

Eksempel 1

border-color:red green blue pink;
  • Øverste kant er rød
  • Højre ramme er grøn
  • Nederste kant er blå
  • Venstre kant er lyserød

Eksempel 2

border-color:red green blue;
  • Øverste kant er rød
  • Højre kant og venstre kant er grønne
  • Nederste kant er blå

Eksempel 3

border-color:dotted red green;
  • Øverste kant og nederste kant er røde
  • Højre kant og venstre kant er grønne

Eksempel 4

border-color:red;
  • Alle fire kanter er røde

Bemærk, at kantstilen ikke kan være none eller hidden, ellers vil kanten ikke blive vist.

Bemærkninger:Ved altid at deklarere border-style egenskaben før border-color egenskaben. Elementet skal have kantfarven, før den ændres.

Se også:

CSS tutorial:CSS Kanter

HTML DOM referencehåndbog:borderColor egenskab

Eksempel

Indstil farven på de fire kanter:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

Prøv det selv

CSS syntaks

border-color: color|transparent|initial|inherit;

Egenskabsværdi

Værdi Beskrivelse
color_name Definerer kantfarven som farvenavn (f.eks. rød).
hex_number Definerer kantfarven som hexadecimal værdi (f.eks. #ff0000).
rgb_number Definerer kantfarven som rgb-kode (f.eks. rgb(255,0,0)).
transparent Standardværdi. Kantfarven er transparent.
inherit Definerer, at kantfarven skal arves fra forældrelementet.

Tekniske detaljer

Standardværdi: ikke specificeret
Arv: nej
Version: CSS1
JavaScript syntaks: object.style.borderColor="#FF0000 blue"

Flere eksempler

Indstil farven på de fire kanter
Dette eksempel viser, hvordan man indstiller farven på de fire kanter. Man kan indstille én til fire farver.

Browserunderstøttelse

Tabelnumre i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Bemærkninger:Internet Explorer 6 (og tidligere versioner) understøtter ikke egenskabsværdien "transparent".

Bemærkninger:Internet Explorer 7 og tidligere versjoner af browsere understøtter ikke værdien "inherit". Internet Explorer 8 kræver !DOCTYPE. Internet Explorer 9 understøtter "inherit".