Pouze tento týden sleva až 80 % na e-learning týkající se Javy. Zároveň využij akce až 50 % zdarma při nákupu e-learningu - více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
java week + discount 50

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

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:

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>

Výsledek:

Ukázka rámečku dotted přes CSS
border-style: dashed;

Výsledek:

Ukázka rámečku dashed přes CSS
border-style: solid;

Výsledek:

Ukázka rámečku solid přes CSS
border-style: double;

Výsledek:

Ukázka rámečku double přes CSS
border-style: groove;

Výsledek:

Ukázka rámečku groove přes CSS
border-style: ridge;

Výsledek:

Ukázka rámečku ridge přes CSS
border-style: inset;

Výsledek:

Ukázka rámečku inset přes CSS
border-style: outset;

Výsledek:

Ukázka rámečku outset přes CSS

Styly všech 4 hran rámečku je možné nastavit spolu s dalšími vlastnostmi zkrácenou CSS vlastností border.

Kromě těchto základních vlastností je možné nastavovat např. zakulacené rohy vlastností border-radius.


 

Všechny články v sekci
Rámeček - CSS vlastnosti
Článek pro vás napsal David Čápka
Avatar
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!