border-style - Český CSS 3 manuál

Naučíme tě pracovat na home-office.

Více info »

Pomocí CSS 3 vlastnosti border-style nastavujeme styl čáry rámečku okolo HTML elementu.

Syntaxe

Vlastnost border-style můžeme deklarovat několika způsoby. Pokud zadáme jen jednu hodnotu, bude označovat styl všech hran rámečku:

border-style: dotted;

Pokud zadáme 2 hodnoty, první označuje vodorovné hrany (horní a dolní), druhá hodnota označuje svislé hrany (levá a pravá):

border-style: dotted double;

Když zadáme 3 hodnoty, první označuje horní hranu rámečku, druhá levou a pravou, třetí dolní:

border-style: dotted double solid;

Hodnoty můžeme zadat samozřejmě i 4 a tak nastavit individuálně všechny 4 hrany rámečku:

border-style: dotted double solid dashed;

Pro každou složku stylu rámečku existuje zvlášť CSS vlastnost, která ji nastavuje. Jsou to:

border-bottom-style - Styl čáry dolního rámečku
border-left-style - Styl čáry levého rámečku
border-right-style - Styl čáry pravého rámečku
border-top-style - Styl čáry horního rámečku

Hodnoty

none - Bez rámečku.
hidden - Rámeček se nevykreslí.
dotted - Tečkovaný.
dashed - Čárkovaný.
solid - Plná čára.
double - Dvojitý.
groove - 3D rámeček s efektem groove.
ridge - 3D rámeček s efektem ridge.
inset - 3D rámeček s efektem inset.
outset - 3D rámeček s efektem outset.
inherit - Zdědí styl čáry rámečku nadřazeného elementu.

Ukázka

Ukažme si jednotlivé styly rámečku:

<!DOCTYPE html>
<html>
    <head>
        <style>
        #kontejner
        {
            border-width: 10px;
            border-color: blue;
            border-style: dotted;
            width: 300px;
            height: 100px;
        }
    </style>
    </head>
    <body>
        <div id="kontejner">

        </div>
    </body>
</html>