CSS border-color egenskap

Definition och användning

border-color-attributet ställer in färgen för de fyra kantlinjerna. Detta attribut kan ställa in 1 till 4 färger.

border-color-attributet är en förkortningsattribut som kan ställa in färgen på alla synliga kantdelar för ett element, eller sätta olika färger för de fyra kanterna. Se följande exempel:

Exempel 1

border-color:red green blue pink;
  • Övre kanten är röd
  • Rätt kant är grönt
  • Nedre kanten är blå
  • Vänsterkanten är rosa

Exempel 2

border-color:red green blue;
  • Övre kanten är röd
  • Höger- och vänsterkanterna är gröna
  • Nedre kanten är blå

Exempel 3

border-color:dotted red green;
  • Övre- och nedre kanterna är röda
  • Höger- och vänsterkanterna är gröna

Exempel 4

border-color:red;
  • Alla 4 kanterna är röda

Kom ihåg att kantstilen inte kan vara none eller hidden, annars kommer kanten inte att visas.

Kommentar:Ange alltid border-style-egenskapen innan border-color-egenskapen. Elementet måste få kant innan du ändrar dess färg.

Se också:

CSS-lärCSS kanter

HTML DOM referenshandbok:borderColor-egenskapen

Exempel

Ställ in färgen på 4 kanter:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
color_name Definierar kantfärgen som färgnamn (t.ex. red).
hex_number Definierar kantfärgen som hexadecimalt värde (t.ex. #ff0000).
rgb_number Definierar kantfärgen som rgb-kod (t.ex. rgb(255,0,0)).
transparent Standardvärde. Kantfärgen är transparent.
inherit Definierar att kantfärgen ska ärva från föräldrelementet.

Tekniska detaljer

Standardvärde: inte specificerat
Arv: no
Version: CSS1
JavaScript-syntax: object.style.borderColor="#FF0000 blue"

Mer exempel

Ställ in färgen på fyra kanter
Detta exempel visar hur du ställer in färgen på fyra kanter. Du kan ställa in ett till fyra färger.

Webbläsarstöd

Numreringen i tabellen anger den första webbläsarens version som fullständigt stöder egenskapen.

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

Kommentar:Internet Explorer 6 (och tidigare versioner) stöder inte egenskapsvärdet "transparent".

Kommentar:Internet Explorer 7 och tidigare versioner av webbläsare stöder inte värdet "inherit". Internet Explorer 8 kräver !DOCTYPE. Internet Explorer 9 stöder "inherit".