Home >> CSS návod >> CSS Rámečky

CSS Rámečky

V CSS můžete přidat rámeček pro jakýkoliv HTML element. Máte možnost vybrat si z několika druhů rámečků a ty následně upravovat...

Základní rámeček

Rámeček vytvoříte pomocí atributu border-width (stačí jenom border) ,kde zadáte tloušťku, můžete také definovat styl rámečku border-style, a barvu rámečku border-color. You can also use the border property to set all properties at once.

Tloušťka, Styl, Barva


<p style="border-width:2px;border-style:solid;border-color:red;">Tento text je orámovaný klasickým červeným rámečkem o tloušťce 2px.</p>

Výsledek:

Tento text je orámovaný klasickým červeným rámečkem o tloušťce 2px.

Zkratka

CSS informaci o rámečku můžete napsat ve zkratce, pomocí atributu: border: tloušťka styl barva.


<p style="border:2px solid red;">CSS informace o tomto rámečku je napsána ve zkratce.</p>

Výsledek:

CSS informace o tomto rámečku je napsána ve zkratce.

Můžete si všimnout, že výsledek je stejný jako v předchozím případě.

Styly rámečků

Zde je seznam stylů rámečků.


<p style="border:4px solid blue;">Styl tohoto rámečku je 'solid'.</p>

<p style="border:4px dotted blue;">Styl tohoto rámečku je 'dotted'.</p>

<p style="border:4px dashed blue;">Styl tohoto rámečku je 'dashed'.</p>

<p style="border:4px double blue;">Styl tohoto rámečku je 'double'.</p>

<p style="border:4px groove blue;">Styl tohoto rámečku je 'groove'.</p>

<p style="border:4px ridge blue;">Styl tohoto rámečku je 'ridge'.</p>

<p style="border:4px inset blue;">Styl tohoto rámečku je 'inset'.</p>

<p style="border:4px outset blue;">Styl tohoto rámečku je 'outset'.</p>

Výsledek:

Styl tohoto rámečku je 'solid'.

Styl tohoto rámečku je 'dotted'.

Styl tohoto rámečku je 'dashed'.

Styl tohoto rámečku je 'double'.

Styl tohoto rámečku je 'groove'.

Styl tohoto rámečku je 'ridge'.

Styl tohoto rámečku je 'inset'.

Styl tohoto rámečku je 'outset'.

Nastavení rámečku pro každou stranu

Pokud nechcete v rámečku všechny 4 strany, můžete specifikovat jen ty které chcete.

Atributy pro části rámečku

Vše zůstává stejné jako u klasického rámečku, specifikujete pouze o kterou část se jedná.

border-top
border-bottom
border-left
border-right

Příklad:


<p style="border-bottom:4px dashed red;border-top:4px dashed red;">Tento text je orámován pouze ze spodu a shora.</p>

Výsledek:

Tento text je orámován pouze ze spodu a shora.

S rámečky v CSS si můžete opravdu pohrát:

Tento rámeček má každou část v jiném stylu.

Další lekce >>

<< Předchozí lekce