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

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

Pomocí CSS 3 vlastnosti border-radius nastavujeme poloměr zakulacení rohů rámečku okolo HTML elementu. Tato vlastnost je shrnující a umožňuje nastavit všechny 4 rohy najednou. Dříve se pro tento efekt musely ručně vytvářet obrázky, nyní postačí jediný řádek v CSS.

Syntaxe

Vlastnost border-radius můžeme deklarovat několika způsoby. Pokud zadáme jen jednu hodnotu, bude udávat poloměr všech rohů rámečku:

border-radius: 20px;

Pokud zadáme 2 hodnoty, první označuje levý horní a pravý dolní roh, druhá pravý horní a levý dolní roh:

border-radius: 20px 10px;

Když zadáme 3 hodnoty, první označuje levý horní roh, druhá pravý horní a levý dolní roh, třetí pravý dolní roh:

border-radius: 20px 10px 5px;

Hodnoty můžeme zadat samozřejmě i 4 a tak nastavit individuálně všechny 4 hrany rámečku v pořadí levý horní, pravý horní, pravý dolní, levý dolní:

border-radius: 20px 15px 10px 5px;

Zadat můžeme dokonce 2 poloměry ke každému rohy, abychom nastavili každé polovině rohu jiný. Hodnoty se zadávají stejně, jako výše, pouze se přidají další za lomítkem, které nastavují druhou polovinu rohů:

border-radius: 20px 15px 10px 5px / 5px 10px 15px 20px;

Hodnoty před lomítkem jsou vodorovné poloměry, za lomítkem svislé.

Pro každý roh rámečku existuje zvlášť CSS vlastnost, která nastavuje jeho poloměr. Jsou to:

Hodnoty

  • délka - Délka poloměru např. v pixelech.
  • % - Délka poloměru rohu vyjádřená jako část z velikosti elementu.

Tip: hodnotou 50% dostaneme z elementu elipsu, případně kružnici.

Ukázka

Vyzkoušejme si zadání 2 poloměrů:

<!DOCTYPE html>
<html>
        <head>
                <style>
                #kontejner
                {
                        background-color: blue;
                        border-radius: 50px 20px;
                        width: 300px;
                        height: 100px;
                }
        </style>
        </head>
        <body>
                <div id="kontejner">

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

Výsledek:

Ukázka nastavení zakulacení rohů rámečku přes CSS

Kromě zakulacení rohů můžeme rámečku nastavovat další parametry CSS vlastností border.

Kulaté rohy tabulky

Kulaté rohy můžeme nastavit i tabulce, i když je to o něco složitější. Tento CSS kód umožňuje tabulce s danou třídou zaoblit rohy, tedy vlastně rohy rohových buněk tabulky. Měl by fungovat na jakoukoli tabulku, využívá však CSS3, takže ve starších prohlížečích fungovat nebude. V klasické tabulce s border-collapse: collapse se nedá nastavovat buňkám border-radius. Pokud však nastavíme vzdálenost mezi buňkami na 0px a okraje buňky jen horní a levé + u posledního řádku dolní a posledního sloupce pravou, docílíme stejného efektu. Pak už stačí nastavit border-radius rohovým buňkám tabulky. Jen je ještě třeba dát pozor na hlavičkové buňky (th), hlavičku tabulky (thead) a patičku tabulky (tfoot).

CSS kód

/*Nastavení separovaných buněk a nulové vzdálenosti mezi buňkami*/
table.roundedCorners{
        border-collapse: separate;
        border-spacing: 0px;
}

/*Vypnutí pravých a dolních rámečků*/
table.roundedCorners td, table.roundedCorners th{
    border-style: solid none none solid;
}
/*Nastavení dolního rámečku posledním buňkám (td, th)*/
table.roundedCorners :not(thead):not(tbody) tr:last-child td,
table.roundedCorners :not(thead):not(tbody) tr:last-child th,
table.roundedCorners tbody:last-child   tr:last-child td,
table.roundedCorners tbody:last-child   tr:last-child th { border-bottom-style: solid;}

/*Nastavení pravého rámečku buňkám v posledním sloupci(td, th)*/
table.roundedCorners td:last-child,
table.roundedCorners th:last-child { border-right-style: solid; }

/*Nastavení levého horního kulatého rohu*/
table.roundedCorners :not(tbody):not(tfoot) tr:first-child td:first-child,
table.roundedCorners :not(tbody):not(tfoot) tr:first-child th:first-child,
table.roundedCorners tbody:first-child  tr:first-child td:first-child,
table.roundedCorners tbody:first-child  tr:first-child th:first-child { border-top-left-radius: 10px;}

/*Nastavení pravého horního kulatého rohu*/
table.roundedCorners :not(tbody):not(tfoot) tr:first-child td:last-child,
table.roundedCorners :not(tbody):not(tfoot) tr:first-child th:last-child,
table.roundedCorners tbody:first-child  tr:first-child td:last-child,
table.roundedCorners tbody:first-child  tr:first-child th:last-child  { border-top-right-radius: 10px;}

/*Nastavení levého dolního kulatého rohu*/
table.roundedCorners :not(thead):not(tbody) tr:last-child td:first-child,
table.roundedCorners :not(thead):not(tbody) tr:last-child th:first-child,
table.roundedCorners tbody:last-child   tr:last-child td:first-child,
table.roundedCorners tbody:last-child   tr:last-child th:first-child { border-bottom-left-radius: 10px;}

/*Nastavení pravého dolního kulatého rohu*/
table.roundedCorners :not(thead):not(tbody) tr:last-child td:last-child,
table.roundedCorners :not(thead):not(tbody) tr:last-child th:last-child ,
table.roundedCorners tbody:last-child   tr:last-child td:last-child,
table.roundedCorners tbody:last-child   tr:last-child th:last-child { border-bottom-right-radius: 10px;}

Ukázka použití v HTML

<!DOCTYPE html>
<html>
        <head>
                <style>
                table
                {
                        width: 100%;
                }
                table td, th{
                        border: 1px solid black;
                }
                </style>
                <link rel="stylesheet" type="text/css" href="kulate-rohy-tabulky.css">
        </head>
        <body>
                <table class="roundedCorners">
                        <tr>
                                <th>Portrét</th>
                                <th>Jméno</th>
                                <th>Povolání</th>
                        <tr>
                                <td><img src="homer.png" alt="Homer Simpson" /></td>
                                <td>Homer Simpson</td>
                                <td>Bezpečnostní technik ve springfieldské jaderné elektrárně.</td>
                        </tr>
                        <tr>
                                <td><img src="lenny.png" alt="Lenny Leonard" /></td>
                                <td>Lenny Leonard</td>
                                <td>Pracovník ve springfieldské jaderné elektrárně.</td>
                        </tr>
                        <tr>
                                <td><img src="carl.png" alt="Carl Carlson" /></td>
                                <td>Carl Carlson</td>
                                <td>Pracovník ve springfieldské jaderné elektrárně.</td>
                        </tr>
                        <tr>
                                <td><img src="edna.png" alt="Enda Krabappel" /></td>
                                <td>Edna Krabappel</td>
                                <td>Učitelka na springfieldské základní škole.</td>
                        </tr>
                </table>
        </body>
</html>

Výsledek

Kódem k zakulacení rohů přispěl Michal.


 

  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
TeryK2
Člen
Avatar
TeryK2:

Ahoj, jak by bylo možné vypnout mřížku u tabulky?

Editováno 23.12.2014 13:51
 
Odpovědět 23.12.2014 13:51
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na TeryK2
Samuel Illo :

Border collapse a border nastaviť na nula ak bude treba...

Odpovědět 23.12.2014 14:10
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Odpovědět 23.12.2014 18:30
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Michal Šmahel (ceskyDJ)
Samuel Illo :

Mal by, ale border-collapse vlastne urobí z dvojitej čiary medzi bunkami jednoduchú - zlúči ich dohromady + samizdá zúži medzeru medzi bunkami (tým že spojí čiary) ale s tým som si neni istý, a potom borderom môže orámovanie úplne vymazať.

Odpovědět  -1 23.12.2014 18:35
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Odpovídá na Samuel Illo
Michal Šmahel (ceskyDJ):

To vím, co dělá border-collapse. Ale myslím, že když vypneš border, ohraničení kompletně zmizí.

Odpovědět  +1 24.12.2014 9:56
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
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 5 zpráv z 5.