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

Pomocí CSS 3 vlastnosti border-bottom-right-radius nastavujeme poloměr zakulacení pravého dolního rohu rámečku okolo HTML elementu. Dříve se pro tento efekt musely ručně vytvářet obrázky, nyní postačí jediný řádek v CSS.

Syntaxe

Vlastnost border-bottom-right-radius můžeme deklarovat s jednou hodnotou, která udává poloměr kulatého rohu:

border-bottom-right-radius: 20px;

Pokud zadáme 2 hodnoty, můžeme tak nastavit zvlášť poloměr vodorovné poloviny rohu a té svislé:

border-bottom-right-radius: 20px 10px;

Hodnoty pro všechny rohy najednou nastavíme pomocí shrnující CSS vlastnosti border-radius.

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

border-bottom-left-radius - Levý 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.

Ukázka

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

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

Výsledek:

Ukázka nastavení zakulacení pravého dolního rohu 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.

Článek pro vás napsal David Hartinger

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity

Nejčastěji vyhledáváné

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

Syntaxe

Hodnoty

Ukázka