Každému blokovému HTML prvku lze nastavit pomocí CSS stylů různá ohraničení. Lze nastavit ohraničení okolo nebo jen z některých stran. K nastavení ohraničení slouží CSS vlastnost "border".
border
- tato vlastnost nastaví ohraničení ze všech stran
- zápis vlastnosti border se skládá z více hodnot najednou
- musí se dodržet přesné pořadí jednotlivých hodnot
- první se udává tloušťka ohraničení
- hodnotami může být:
- thin (slabé ohraničení),
- medium (střední ohraničení),
- thick (silné ohraničení)
- nebo rozměr (px, pt, em,...)
- druhý se udává styl (typ) ohraničení
- hodnotami může být:
- none (žádný),
- 2D efekt: dotted (tečkované), dashed (čárkované), solid (plné), double (dvojité),
- 3D efekt: groove (příkop), ridge (val), inset (ďolík), outset (návrší)
- třetí se udává barva ohraničení
- hodnotami může být:
- anglický název barvy
- hexadecimálně RGB kód
- desítkově RGB kód
- percentuálně RGB kód
Příklady CSS syntaxe
selektor {border: 2px solid black}
selektor {border: 8pt dotted #00FFFF}
selektor {border: thin inset rgb(255,255,255)}
selektor {border: none}
border-left, border-right, border-top, border-bottom
- tato vlastnost nastaví ohraničení jen pro požadovanou stranu
- můžete nastavit různá ohraničení pro jednotlivé strany
- border-left (levý ohraničení)
- border-right (pravé ohraničení)
- border-top (horní ohraničení)
- border-bottom (dolní ohraničení)
- lze definovat jen tu stranu, kterou potřebujete ohraničit
- zápis hodnot se posléze řídí stejnými pravidly jako vlastnost "border"
Příklady CSS syntaxe
selektor {border-left: 1px solid blue}
selektor {border-top: 2px dotted #00FFFF}
selektor {border-right: thick outset rgb(255,255,255)}
selektor {border-bottom: none}
border-radius
- umožní nastavit zaoblení rohů ohraničeného prvku
- hodnotou je poloměr zaoblení
- rozměr v pixelech
- procento z výšky nebo šířky prvku
- lze zapsat i formou 4 hodnot (pro každý roh zvlášť)
- poté platí pořadí: horní levý roh - horní pravý roh - dolní pravý - dolní levý (ve směru hodinových ručiček)
Příklady CSS syntaxe
selektor {border-radius: 6px}
selektor {border-radius: 10%}
selektor {border-radius: 3px 3px 6px 6px}