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

HTML a CSS Manuál Rámeček border-bottom-style - Český CSS 3 manuál

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

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.

Další hrany nastavíme pomocí následujících CSS vlastností:

Styl celého rámečku najednou nastavíme CSS vlastností border-style, zde naleznete také ukázky jednotlivých stylů.

Ukázka

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

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

Výsledek:

Ukázka dolního rámečku dotted přes CSS

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

Avatar
Tomáš123
Člen
Avatar
Tomáš123:

Ahoj, nemám prehľad vo všetkých článkoch v kategórii, ale prečo článok nepojednáva celkovo o vlastnosti border. Príde mi nejdnotné písať o border-strana-style, potom pridať border-radius a nespomenúť súvisiaci zvyšok.

EDIT: Všímam si, že existujú aj články na border-ostante-style.

BTW: border-bottom-style nie je CSS3 vlastnosť.

Editováno 25.2.2015 15:18
Odpovědět 25.2.2015 15:15
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Aleš Lulák
Člen
Avatar
Odpovídá na Tomáš123
Aleš Lulák:

border-bottom-style je CSS3 vlastnost, to, že byla již dříve neznamená, že není CSS3 vlastnost. Kdyby nebyla, nemohl bys ji používat

Odpovědět 25.2.2015 15:26
Jsem hloupý člověk, proto se musím vzdělávat
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.

Zobrazeno 2 zpráv z 2.