CSS Ramar/Borders

I denna artikel kommer jag att gå igenom de olika egenskaperna för ramarna i css (borders).

Ramegenskaper

• border
• border-bottom
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-color
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-style
• border-top
• border-top-color
• border-top-style
• border-top-width
• border-width

Dessa egenskaper ger dig möjligheten att anpassa de olika objekten och elementen och ge de specifika utseendet med hjälp av ramarnas typ, storlek och färg.

Bredden

Du kan ange en bredd på en ram, du har fyra olika alternativ: thin, medium, thick. Det fjärde alternativet är ett siffervärde i pixlar, t.ex. 5px;

Färgen

Du kan ange en färg på ramen på tre olika sätt:

border-color: rgb( 100, 100, 255);

border-color: #990000;

border-color: red;

Stilen

Självklart har ramar olika stilar också. Nedan finner du en lista på olika stilar, och nedanför har jag lagt till några exempel.

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• hidden

Exempel

Här får du en kod för en div med ramegenskaper:

<div style="padding-right: 5px; padding-left: 5px; margin-bottom: 10px; padding-top: 5px; text-align: center; border: #000000 2px solid">

Solid border 

</div>

Då blir den som den solida ramen visad ovan. 

Slutord

Nu har vi fått lära oss lite mer om hur man hanterar ramarna med hjälp av CSS. Hoppas det hjälpte!

Skapades: 2007-07-31 13:11:28
Skribent: Shadi
Lästs 2543 gånger
Betyg: 0 (artikeln har endast 1 röster, det krävs minst 5 för ett betyg)

Kommentarer