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

HTML a CSS Manuál Rámeček 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.


 

  Aktivity (1)

Manuál pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Miniatura
Všechny články v sekci
Rámeček - CSS vlastnosti

 

 

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í!