CSS: border

Ääred. Kõik võimalikud äärte seadistamise valikud.

Atribuutide seeria: border, border-top, border-right, border-bottom, border-left

Seeria atribuute, mis võimaldavad määrata ääre kogu elemendile (border) või ainult elemendi ühele küljele: ülemine (border-top), parempoolne (border-right), alumine (border-bottom), vasakpoolne (border-left). Tegemist on kombineeritud atribuudiga, mis sisaldab endas äärejoone laiust, stiili ning värvi.

Näited

Ühtne äärejoon kogu elemendile laiusega 1 piksel ning sinist värvi:

border: 1px solid blue;

Täpiline äärejoon elemendi ülemisele küljele laiusega 1 ekraani mõõtühik ning punast värvi kasutades värvikoodi:

border-top: 1em dotted #0000ff;

Atribuutide seeria: border-style, border-top-style, border-right-style, border-bottom-style, border-left-style

Ainult äärejoone stiili määramiseks, võimalik kasutada samamoodi eraldiseisvalt igale küljele. Võimalikud väärtused:

Kasutades atribuuti border-style, saab eri külgedele määrata stiile märkides neid mitmekordselt:

Näited

Ühtne äär kogu elemendile:

border-style: solid;

Ainult ülemine äär:

border-style-top: dashed;

Atribuutide seeria: border-width, border-top-width, border-right-width, border-bottom-width, border-left-width

Äärejoone laiuse määramiseks. Võimalik kasutada kogu elemendi puhul või määrata igale küljele eraldi laiuse. Võimalikud väärtused:

Kasutades atribuuti border-width, saab eri külgedele määrata laiuse märkides neid mitmekordselt:

Näited

Ühtne äärejoone laius kogu elemendile:

border-width: 2px;

Ainult vaskpoolne ja parempoolne külg:

border-width-left: 2px;
border-width-right: 2px;

Sama tulemuse (vaskpoolne ja parempoolne külg) saab ka nii:

border-width: 0 2px;

Atribuutide seeria: border-color, border-top-color, border-right-color, border-bottom-color, border-left-color

Äärejoone värvi määramiseks. Võimalik kasutada kogu elemendi puhul või määrata igale küljele eraldi äärejoone värv. Võimalikud väärtused:

Kasutades atribuuti border-color, saab eri külgedele määrata äärejoone värvuse märkides neid mitmekordselt:

Näited

Ühtne äärejoone värvus kogu elemendile:

border-color: red

Värvime ainult vasaku külje ja kasutame värvikoodi:

border-color-left: #ff0000;

© Margo Munner | Sisukaart