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:

border-bottom-left-radius - Levý dolní roh rámečku
border-bottom-right-radius - Pravý dolní roh rámečku
border-top-left-radius - Levý horní roh rámečku
border-top-right-radius - Pravý horní roh rámečku

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 - Rámeček - CSS vlastnosti

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>