Kanter

I denna lektionen får du lära dig hur man ger ett element kanter.

För att visa hur kanter fungerar i CSS kommer vi att använda oss av följande HTML-kod:

HTML - HyperText Markup Language
<p id="paragraf">Detta är en paragraf.</p>

För att ge ett element en kant så använder man följande tre egenskaper:

  • border-width - tjockleken på kanten
  • border-color - färgen på kanten
  • border-style - kantens mönster

Ett exempel på hur det kan se ut ser du nedan.

CSS - Cascading Style Sheets
#paragraf{ border-width: 3px; /* Var 3 pixlar tjock */ border-color: red; /* Var röd */ border-style: solid; /* Var solid (helstreckad) */ }

Detta är en paragraf.

Andra värden som border-style kan anta är bland annat dotted, dashed och double.

CSS - Cascading Style Sheets
#paragraf{ border-width: 5px; border-color: lime; border-style: dotted; }

Detta är en paragraf.

CSS - Cascading Style Sheets
#paragraf{ border-width: 1px; border-color: purple; border-style: dashed; }

Detta är en paragraf.

CSS - Cascading Style Sheets
#paragraf{ border-width: 3px; border-color: yellow; border-style: double; }

Detta är en paragraf.

Om man vill kan man ange alla tre egenskaperna samtidigt i egenskapen border. Det spelar ingen roll vilken ordning dem listas i.

CSS - Cascading Style Sheets
#paragraf{ border: 3px solid silver; /* Notera att ordningen inte spelar någon roll. Vi skulle uppnå samma resultat med följande koder: border: solid 3px silver; border: silver 3px solid; border: solid silver 3px; ... */ }

Detta är en paragraf.

Man kan även specificera en viss kant (ovan, under, vänster eller höger). Det gör man på följande sätt:

CSS - Cascading Style Sheets
#paragraf{ /* Kanten ovanför */ border-top-width: 4px; border-top-color: red; border-top-style: solid; /* Kanten under */ border-bottom-width: 2px; border-bottom-color: lime; border-bottom-style: dotted; /* Kanten till vänster */ border-left-width: 3px; border-left-color: yellow; border-left-style: dashed; /* Kanten till höger */ border-right-width: 2px; border-right-color: blue; border-right-style: dashed; }

Detta är en paragraf. Detta är en paragraf. Detta är en paragraf.

Även här kan man ange alla tre egenskaperna direkt till en specifik kant. Det spelar heller ingen roll vilken ordning kantegenskaperna står i.

CSS - Cascading Style Sheets
#paragraf{ /* Kanten ovanför */ border-top: 4px red solid; /* Kanten under */ border-bottom: 2px dotted lime; /* Kanten till vänster */ border-left: dashed yellow 3px; /* Kanten till höger */ /* Man måste inte ha med alla kanter, men självklart kan man göra likadant för högerkanten (exempel: border-right: 4px dotted blue;). */ }

Detta är en paragraf.

Detta är allt som finns att lära sig om kanter, så hoppa vidare till nästa lektion nu!

Gå till nästa lektion, Storlekar.