CSS 3 – del 4 – Borders

Postad: 09.11.2009 | Uppdaterad: 08.08.2017 | CSS Lästid: 4 minuter

Att använda borders är ett lätt sätt att förhöja valda delar på sin hemsida. Med CSS3 kan man verkligen skapa många finesser! Vad sägs om rundade hörn, gradient borders och border-images? Ja ni läste faktiskt rätt, det går att använda bilder till sin border. De som för länge sedan kanske använde nästlade tabell-layouter minns säkert att man åtminstone använde 2 eller rent av 3 tabeller förutom själva content i syfte att skapa borders med bilder. Nu fixar CSS3 den saken!

Rundade borders

Inget kan bli enklare, utan bilder och utan javascript kan man skapa rundade borders genom att välja border-radius och background position. Låt oss kika på några exempel.

.selector {padding: 20px; border-radius: 10px; -o-border-radius: 10px; -icab-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #d4c99d; border: 1px solid #fff;}

Vill du hellre lägga in allt i en specificerad class så ser koden ut så här.

.border_rounded {
background-color: #d4c99d;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #fff;
padding: 20px;
width: 310px;}

Men det är inte nog med detta, du kanske bara vill ha vissa hörn rundade? Då ska du absolut testa detta.

Alternativa rundade hörn

* -moz-border-radius-topleft  / -webkit-border-top-left-radius

Det här är koderna till boxen med det rundade nedre vänstra hörnet

.selector {border: 1px solid #000; border-radius-bottomleft: 10px; -o-border-radius-bottomleft: 10px; -icab-border-radius-bottomleft: 10px; -khtml-border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-radius-bottomleft: 10px; border-bottom-left-radius: 10px; -o-border-bottom-left-radius: 10px; -icab-border-bottom-left-radius: 10px; -khtml-border-bottom-left-radius: 10px; -moz-border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; padding: 5px 5px 5px 15px; margin-bottom: 20px;"}

Det här är koderna till boxen med det rundade nedre högra hörnet

.selector {border: 1px solid #000; border-radius-bottomright: 10px; -o-border-radius-bottomright: 10px; -icab-border-radius-bottomright: 10px; -khtml-border-radius-bottomright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-radius-bottomright: 10px; border-bottom-right-radius: 10px; -o-border-bottom-right-radius: 10px; -icab-border-bottom-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -moz-border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; padding: 5px 5px 5px 15px; margin-bottom: 20px;"}

Det här är koderna till boxen med det vänstra övre hörnet rundat

.selector {border: 1px solid #000; border-radius-topleft: 10px; -o-border-radius-topleft: 10px; -icab-border-radius-topleft: 10px; -khtml-border-radius-topleft: 10px; -moz-border-radius-topleft: 10px; -webkit-border-radius-topleft: 10px; border-top-left-radius: 20px; -o-border-top-left-radius: 20px; -icab-border-top-left-radius: 20px; -khtml-border-top-left-radius: 20px; -moz-border-top-left-radius: 20px; -webkit-border-top-left-radius: 20px; padding: 5px 5px 5px 15px; margin: 20px 0;"}

Det här är koderna till boxen med det högra övre hörnet rundat

.selector {border: 1px solid #000; border-radius-topright: 10px; -o-border-radius-topright: 10px; -icab-border-radius-topright: 10px; -khtml-border-radius-topright: 10px; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; -o-border-top-right-radius: 10px; -icab-border-top-right-radius: 10px; -khtml-border-top-right-radius: 10px; -moz-border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; padding: 5px 5px 5px 15px; margin-bottom: 20px;}

Border-color Gradient

Koden för border gradient

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;
width:500px;
}

Eller så här:

.border_gradient {border: 8px solid #000; border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -o-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -icab-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -khtml-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -webkit-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -o-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -icab-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -khtml-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -webkit-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -o-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -icab-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -khtml-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -webkit-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -o-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -icab-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -khtml-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -webkit-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; padding: 5px 5px 5px 15px;}

Border – image

Att använda en bild som border är något helt nytt och revolutionerande. Det här innebär att du faktiskt kan definera en bild som en border. Man använder två egenskaper: border-image och border-corner-image.

För border – image

border-top-image
 border-right-image
 border-bottom-image
 border-left-image

För border – corner – image

border-top-left-image
 border-top-right-image
 border-bottom-left-image
 border-bottom-right-image

Själva syntaxen för din css-kod ser ut så här och genererar följande:

border-image: url(border.png) 27 27 27 27 round round;

Ett annat alternativ är att ”sträcka” ut bilden (stretch). Syntaxen ser ut så här och ger följande:

border-image: url(border.png) 27 27 27 27 stretch stretch;