IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

Pomocí CSS 3 vlastnosti border-top-left-radius nastavujeme poloměr zakulacení levého horní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-top-left-radius můžeme deklarovat s jednou hodnotou, která udává poloměr kulatého rohu:

border-top-left-radius: 20px;

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

border-top-left-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:

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-top-left-radius: 50px;
            width: 300px;
            height: 100px;
        }
    </style>
    </head>
    <body>
        <div id="kontejner">

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

Výsledek:

Ukázka nastavení zakulacení levého horní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.


 

Všechny články v sekci
Rámeček - CSS vlastnosti
Článek pro vás napsal David Hartinger
Avatar
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity