Border-style

Från Webbling
Hoppa till: navigering, sök

Används för att sätta linjetyp på ett elements kantlinjer. Det här egenskapen kan ta mellan en och fyra värden.

Om man anger ett värde, kommer det att gälla för alla kantlinjerna.

Om man anger två värden; Det första gäller för topp- och bottenkant och det andra för höger- och vänsterkant.

Om man anger tre värden; Det första att gäller för toppkanten. Det andra för höger- och vänsterkanterna. Det tredje gäller för bottenkanten.

Om man anger fyra värden; Det första gäller för toppen. Det andra för högerkanten. Det tredje för botten. Det fjärde för vänsterkanten.

Egenskaper

Parametrar none | hidden |dotted | dashed | solid| double| groove| ridge| inset| outset| inherit
Defaultvärde none
Ärvs? Nej
Animerbart? Nej
Fungerar med... Alla element

none och hidden ingen kantlinje visas.

dotted kantlinjen ritas ut som linje av punkter.

dashed kantlinjen ritas ut som en linje av korta streck.

solid kantlinjen ritas ut heldragen.

double kantlinjen ritas ut som två heldragna linjer.

groove en enkel 3D-effekt som ser ut som linjen täljts ut ur ytan.

ridge en enkel 3D-effekt som ser ut som linjen sticker ut ifrån ytan.

inset ser ut som om kantlinjen går inåt.

outset ser ut som om kantlinjen går utåt.

inherit egenskapen ärvs ifrån motsvarande egenskapen i föräldraelementet.

Exempel

See the Pen ZGgbgp by Patrik Grip-Jansson (@PGJ) on CodePen.

Egenskapens definition

https://drafts.csswg.org/css-backgrounds-3/#border-style