MENU

Border – css vlastnost pro rámečky

Vlastnost, jež vykreslí rámeček kolem prakticky jakéhokoli HTML elementu. Velice užitečný nástroj pro design webu v rukou dobrého kodéra. Naučte se s námi jej používat. 

Funguje prakticky ve všech dnes používaných prohlížečích | není dědičná

Způsob zápisu

Ukázka zápisu červeného rámečku vytvořeného z jednolité čáry o šířce 1px:

selektor {
border: #ff0000 solid 1px;
}

Vysvětlení způsobu zápisu

Vlastnost border se musí skládat z celkem tří vlastností, pokud má být rámeček vidět:

  1. border-color – definuje, jakou barvou má být rámeček vykreslen, více o border-color zde,
  2. border-style – je nutný protože říká prohlížeči, jakým způsobem má rámeček vykreslit, více o hodnotách border-style zde,
  3. border-width – určuje, jak silný bude rámeček, hodnotu většinou zapisujeme v pixelech.

Poznámka: pokud zvolíte tento způsob zápisu, tak určíte všechny čtyři strany rámečku stejné.

Jak udělat BORDER, aby platil pouze pro určité strany

Někdy je potřeba stylovat každou stranu rámečku samostatně. Není to žádný problém, jen za pomlčku vložíte pozici strany, kterou budete stylovat, viz:

  • border-top – vystyluje horní rámeček,
  • border-bottom – vystyluje spodní rámeček, 
  • border-left – vystyluje levý rámeček,
  • border-right – vystyluje pravý rámeček.

Vliv BORDER na ostatní elementy

Pozor! Rámeček se připočítává k rozměrům elementu. Co to v praxi znamená? Řekněme, že mát obrázek o rozměrech 100 × 100 pixelů. Kolem obrázku vytovříte rámeček o velikosti (border-width) 2px. V ten okamžik rozměr obrázku je 104 × 104 pixely.  To se nemusí nijak negativně projevit. Ale ukažme si jiný, problematický příklad.

Možné problémy s BORDER

Potřebujete vytvořit dva sloupce a použijete CSS vlastnost FLOAT. Oběma elementům (např. DIV) definujete šířku 50%, tedy oba sloupce budou stejně široké. Jestliže použijete rámeček, tak se elementy vedle sebe nevejdou, protože v součtu překročí 100% a prohlížeč je umístí pod sebe, což není žádoucí.

Řešení problému

V tomto případě, kdy připočítávání rámečku vadí správnému chování rozložení prvků, použijeme další vnitřní element (např. DIV), na který aplikujeme rámeček, čímž vyřešíme problém a vyhneme se potížím v případě FLOAT.

Kam dál

Potřebujete pomoci? Žádný problém!

Nevíte si s něčím rady a potřebujete rychlou pomoc odborníka? Můžete se obrátit na nás a my vám dokážeme pomoci i přes internet.

Více o on-line pomoci přes internet se dozvíte zde:

On-line pomoc

Pokud nevíte, neváhejte se zeptat

© HelpMark | Tomáš Herout | Tel: +420 739 719 548