Domov › Nastavení › Css obdélník se zaoblenými hranami. Jak zaoblit rohy obrázku pomocí CSS bez Photoshopu

Css obdélník se zaoblenými hranami. Jak zaoblit rohy obrázku pomocí CSS bez Photoshopu

Zaoblené rohy v CSS lze provést mnoha způsoby, velmi mnoha, a některé z nich lze považovat za zastaralé, protože CSS 3 zavedlo nové vlastnosti, které vám umožňují zaoblit rohy prvků HTML. Za prvé však starší prohlížeče tyto vlastnosti nepodporují a za druhé se v kreativním mozku designéra někdy zrodí takové nápady, které dokážou zachránit jen staré metody. Proto se zde podíváme na několik různých možností pro vytváření zaoblených rohů v CSS: od nejjednodušších po poměrně složité.

V těchto příkladech jsou rohy původně blokových prvků zaoblené a v některých příkladech jsou tyto bloky použity jako pomocné prvky. Pamatujte však, že totéž můžete snadno provést s prvky na úrovni řádků a v případě potřeby je přednastavit pomocí bloku nebo vloženého bloku.

Zaoblené rohy v CSS 3 bez obrázků

Tento příklad využívá vlastnosti z CSS 3, které vám umožňují snadno zaoblovat rohy bez pomoci obrázků.

Příklad HTML a CSS: Zaoblení rohů pomocí CSS 3 bez obrázků

webové stránky - Zaoblení rohů pomocí CSS 3 bez použití obrázků

Blokovat obsah.

Popis příkladu

Pro zaoblení rohů používáme vlastnost CSS 3, které rozumí všechny moderní prohlížeče.
U starších prohlížečů Firefox, Chrome a Safari používáme speciální vlastnosti s předponami -moz- a -webkit-, které se objevovaly dříve, než byla podporována hlavní vlastnost. Bohužel neexistují žádné podobné analogy pro starou Operu a IE. Upozorňujeme, že při vytváření složitých křivek nemusí vlastnosti s předponami fungovat správně. Proto byly v kódu CSS uvedeny výše než vlastnost main, takže podle stylové priority, používaly to prohlížeče, které už rozumí "čistému".

Vlastnosti s předponami nejsou ve specifikaci CSS, takže jejich použití bude mít za následek neplatný kód.

Zaoblené rohy v CSS bez obrázků

Tento příklad také nemá obrázky, ale používá další bloky. Podstata metody spočívá v tom, že před a za hlavním obsahem je označeno několik bloků, které, jak se od něj vzdalují, postupně zmenšují šířku pomocí bočních vnějších okrajů. Díky tomu dochází k imitaci zaoblení rohů.

Tato metoda je špatná, protože kód je „zasypaný“ dalšími bloky, ale bohužel v mnoha příkladech takové bloky budou přítomny. Další nevýhodou je, že s velkými poloměry zakřivení budete muset přidat ještě více bloků, než je použito v příkladu.

Příklad HTML a CSS: Zaoblení rohů bez použití obrázků

web - Zaoblování rohů v CSS bez obrázků

Blokovat obsah.

Popis příkladu

Uvnitř bloku s class = "block" označujeme prvek pro hlavní obsah ("content_block"), před který umísťujeme bloky pro simulaci zaoblení rohů ("b1" , "b2" , "b3" ). Poté je položíme stejně, ale v opačném pořadí.
Simulační bloky nastavíme na požadovanou výšku a boční okraje (CSS), abychom vytvořili vzhled rohů. Také jsme resetovali jejich velikost písma (CSS) a nastavili ji na :hidden - to je určeno pro starší prohlížeče, které mohou zvětšit výšku a zvětšit ji, než je uvedeno.
V tomto příkladu byla kromě zaoblení rohů přidána také imitace rámu, pokud ji nepotřebujete, pak jednoduše odstraňte všechny „okraje“ z prvků a odstraňte barvu pozadí z „b3“; blok.

Nejjednodušší způsob, jak v CSS zobrazit zaoblené rohy, je použít obrázek jako pozadí prvku. V tomto případě jsou rozměry prvku obvykle zadány stejně jako velikost obrázku na pozadí. Nevýhodou této metody je, že obsah prvku by neměl přesahovat jeho rozsah, to znamená, že by měl mít určitou omezenou velikost.

Příklad HTML a CSS: Zaoblení rohů pomocí jednoho obrázku

web - Zaoblení rohů v CSS pomocí obrázku

JÍDELNÍ LÍSTEK

Popis příkladu

Pomocí vlastnosti CSS nastavíme pro blok obrázek pozadí, jehož replikaci svisle a vodorovně zakazujeme (no-repeat), protože v tomto případě to není vyžadováno.
Aby se text uvnitř bloku nedotýkal jeho okrajů, nastavili jsme jeho výplň (CSS) na 5px na každé straně.
Dále je potřeba nastavit blok na stejné rozměry jako pozadí. Náš obrázek na pozadí má rozměry 140x32 pixelů, ale udáváme šířku (CSS) a výšku (CSS) samotného bloku zmenšené o 10px. Musel jsem to zmenšit kvůli stejným vnitřním výplním, které také rozšiřují prvek o 5px v každém směru.

V předchozím příkladu byla velikost bloku pevná a závisela na velikosti obrázku na pozadí, což je velmi nepohodlné. Nyní změníme šířku našeho bloku. Chcete-li to provést, vystřihněte tři části obrázku - strany a kousek středu. Poté do hlavního bloku umístíme dva prvky s pevnými rozměry, které se díky absolutnímu polohování umístí na jeho boky. Dejme jim stejné boční části jako pozadí a centrální část pro hlavní blok. Získáme tak blok se zaoblenými rohy a proměnnou šířkou.

Tato technika se velmi často používá k zaokrouhlení jednořádkových prvků, jako jsou odkazy nebo názvy sekcí/menu.

Příklad HTML a CSS: Zaoblení rohů pomocí bočních bloků

webové stránky - Zaoblení rohů v CSS pomocí bočních bloků

Hlavní obsah.

Popis příkladu

Do třídy bloku = "blok" umístíme dva prvky - "left_bok" a "right_bok", kterým nastavíme obrázky bočních částí jako pozadí (CSS) a zakážeme jejich reprodukci (no-repeat). Pro samotný hlavní blok nastavíme pozadí z centrální části a umožníme jej duplikovat pouze horizontálně (repeat-x).
U bočních bloků udáváme šířku odpovídající velikosti pozadí pro nás je to 14x32 pixelů. Ale pro hlavní blok, jako v předchozím příkladu, nastavíme výšku na 22px, abychom kompenzovali vertikální výplň.
Naše boční stěny umístíme relativně k "bloku", takže pro něj určíme :relative a absolutní pro samotné boční stěny. No, pak je přitlačíme na odpovídající strany rodiče pomocí vlastností CSS , a .
Aby se obsah bloku neskrýval pod bočními obrázky, nastavili jsme „blok“ tak, aby měl boční výplň (CSS), která může být stejná nebo o něco větší než samotné strany. Nastavíme také malé okraje nahoře a dole, aby se text „nelepil“ k okrajům.

V IE6 je u této metody malá chyba:

Pokud je šířka nebo výška „bloku“ lichá, objeví se mezi vnitřním okrajem bloku a vpravo umístěným postranním panelem nepříjemné 1px odsazení, které celý obrázek zkazí. Tuto chybu lze opravit pomocí CSS hack s určitým výrazem, ale ani zde nebudu uvádět takový příklad, protože často zamrzne prohlížeč a je lepší jej nepoužívat.

Udělejme to jinak. Nastavíme levý okraj (CSS) "right_bok" na 100 % tak, aby se posunul za pravou hranici hlavního bloku, a poté jej vraťme zpět a posuneme jej doleva o počet pixelů rovný jeho šířce. IE6 pracuje s hodnotami těchto vlastností korektně, takže mu nezbývá nic jiného, než umístit blok tam, kam potřebujeme.

Tento způsob zaoblení rohů je podobný předchozímu, ale na rozdíl od něj se zde po stranách neumisťují prvky HTML, ale ty přidané do hlavního bloku pseudo prvky. Díky tomuto přístupu bylo možné zbavit se zbytečného HTML kódu stránky.

Příklad HTML a CSS: Zaoblení rohů pomocí bočních pseudoprvků

web - Zaoblení rohů v CSS pomocí bočních pseudoprvků

Hlavní obsah.

Popis příkladu

Pomocí CSS pseudoprvků naznačíme, že chceme přidat něco na začátek a konec hlavního bloku. A pomocí vlastnosti CSS pouze přidáme potřebné obrázky zaoblených rohů, nebo spíše stran. Vytvořili jsme tedy dva pseudoprvky s obrázky.
No a pak uděláme úplně to samé jako v předchozím příkladu, jen pracujeme s vytvořenými pseudoprvky.

Pro IE6 a IE7 byly v tomto příkladu použity následující „berličky“:

Jak víte, IE6 a IE7 nerozumí zde použitým pseudoprvkům, takže děláme následující. Používáme výraz výraz, který integruje dva tagy do hlavního prvku a dáváme jim stejné styly jako v předchozím příkladu. Všimněte si, že vložený kód, který následuje po prvním innerHTML, je přidán bezprostředně za úvodní značku „block“ a po druhé innerHTML je přidán před uzavírací značku. Ano, v našem případě to nevadí, protože se používá absolutní polohování, ale někdy je užitečné o tom vědět.
Abychom zabránili tomu, aby tento kód viděly jiné prohlížeče, přikládáme jej podmíněné komentáře. Bylo by lepší, kdybyste to vložili do samostatného souboru CSS, který je spojen se značkou uzavřenou se stejnými komentáři.

Zaoblené rohy v CSS pomocí obtékání bloků

Podstatou této metody je, že se nejprve vyříznou rohy obrázku. Poté se do hlavního bloku umístí několik dalších bloků (podle počtu rohů), které jsou vnořeny do sebe. Každý z nich má jako pozadí jeden obrazový roh. Obrázky je zakázáno reprodukovat a souřadnice jsou uvedeny tak, aby zabíraly místa v rozích bloků. Takto se dosáhne efektu zaoblených rohů.

Příklad HTML a CSS: Zaoblení rohů pomocí obtékání bloků

webové stránky - Zaoblení rohů v CSS pomocí obtékání bloků

Blokovat obsah.

Popis příkladu

Do hlavního bloku umístíme další čtyři. Protože žádný z těchto bloků nemá okraje ani okraje a pouze ten nejvnitřnější má odsazení, jsou všechny stejně vysoké a široké.
Pomocí vlastnosti CSS nastavíme každý z vnitřních bloků do rohu jako pozadí, zakážeme jejich reprodukci a umístíme je do rohů bloků. A protože je barva pozadí prvků průhledná, jsou na stránce viditelné všechny čtyři rohy pozadí.
Přidejte požadovanou barvu pozadí do vnějšího bloku s rohem. Vše je připraveno.

Šířku bloku můžete explicitně nastavit zadáním požadované vlastnosti v class="block" , ale pro změnu výšky musíte použít nejvnitřnější prvek (pro nás je to "rb").

Zaoblené rohy v CSS pomocí polohování

I zde jsou vyříznuty rohy pro pozadí, které budou naznačeny na malých blocích. Pomocí CSS absolutního umístění jsou tyto bloky umístěny v rozích hlavního prvku, který má požadovanou barvu pozadí.

Příklad HTML a CSS: Zaoblení rohů pomocí umístění

webové stránky - Zaoblení rohů v CSS pomocí polohování

Blokovat obsah.

Popis příkladu

Uvnitř hlavního prvku (class= "block") umístíme čtyři značky s třídami "corn_lt" , "corn_rt" , "corn_lb" , "corn_rb" , které budou fungovat jako rohové bloky.
Pomocí vlastnosti CSS připojíme ke každému rohovému bloku vlastní obrázek na pozadí a nastavíme jeho šířku a výšku tak, aby se velikostí shodovaly s těmito obrázky na pozadí. Pro každý případ resetujeme velikost písma (CSS) a ořízneme přebytek (CSS).
Určujeme relativní umístění pro hlavní prvek (CSS:relative), protože rohové bloky umístíme relativně k němu, a pro samotné rohy - absolutní (absolutní).
Pomocí vlastností CSS a , určíme vertikální a horizontální vzdálenosti odsazení pro rohové bloky tak, aby byly umístěny v rozích hlavního bloku.

V IE6 je s touto metodou několik problémů:

Pokud není šířka "bloku" výslovně specifikována, pak rohy vlevo nezapadnou na místo. Důvodem je přítomnost vnitřního polstrování v bloku. Nejjednodušší způsob, jak problém vyřešit, je odstranit odsazení a uzavřít hlavní obsah „bloku“ (bez rohů) do dalšího obalu bloku a poté zadat požadované odsazení na obalu. Ale udělal jsem to jinak, když jsem povolil rozložení pomocí vlastnosti zoom:1, která říká IE6, aby zobrazil prvek v jeho přirozené velikosti. Tato vlastnost je neplatná, takže pokud se ji rozhodnete použít, doporučuji provést připojení přes podmíněné komentáře.
Stejná jednopixelová chyba, která byla diskutována výše. Zde se však mohou tvořit mezery nejen mezi pravými rohy a pravou stranou bloku, ale také ve spodní části. A pokud jsme se zbavili mezer napravo, tak to u spodních nepůjde. Řešením je explicitně zadat rovnoměrnou šířku a výšku hlavního prvku. Můžete také nastavit liché hodnoty, ale pak budete muset nastavit vzdálenost offsetu směrem dolů a vpravo tak, aby nebyla nula, ale -1px.

Technologie této metody zaoblení rohů v CSS je v podstatě stejná jako ta předchozí, takže zde budou vynechány podrobné komentáře. Jediný rozdíl je v tom, že místo samostatných rohových obrázků na pozadí je zde použit jeden společný obrázek sprite. Díky tomu se stránky načítají rychleji, protože jeden obrázek „váží“ méně než čtyři a hostování místo čtyř je jedno odvolání.

Sprite je obrázek, který kombinuje několik obrázků používaných jako pozadí pro prvky webu. Která část spritu bude pozadím konkrétního HTML elementu závisí na souřadnicích zadaných ve speciální CSS vlastnosti.

Příklad HTML a CSS: Zaoblení rohů pomocí umístění a sprite

webové stránky - Zaoblení rohů v CSS pomocí sprite a umístění

Blokovat obsah.

Popis příkladu

Pomocí vlastnosti CSS připojíme k rohovým blokům obrázek spritu na pozadí, který má kulatý tvar o rozměrech 22x22 pixelů (11x11 pixelů pro každý čtvrtroh).
Pomocí vlastnosti CSS určíme souřadnice offsetu pozadí. Například hodnota -11px 0 znamená, že pozadí bude posunuto doleva o 11px na ose X, ale nebude posunuto na ose Y. Levá polovina sprajtu tedy překročí hranici prvku a zůstane pouze pravá. Viditelný je ale jen z poloviny, protože jeho výška je 22px a výška samotného rohového bloku je pouze 11px. Ukazuje se tedy, že s touto hodnotou bude pozadí prvku pravá horní čtvrtina spritu.

S IE6 jsou stejné problémy jako v předchozím příkladu.

V tomto příkladu budeme zaoblovat rohy prvku, který má ohraničení, ale to není specifická vlastnost této konkrétní metody – v předchozích příkladech můžete snadno použít zaoblení s ohraničením.

Samotné zaoblení provedeme pomocí pseudoprvků vytvořených z hlavního bloku, ale bez aplikování polohování na ně.

A jeden moment. V předchozích příkladech byly rohy vyříznuty spolu s pozadím uvnitř, a to není vždy nutné, zvláště pokud se očekává, že pozadí bloku se zaoblenými rohy nebude jednotné. Proto bylo pozadí uvnitř rámečku zprůhledněno (formát PNG to umožňuje) a při vyříznutí rohů se ukázalo průhledným i jejich vnitřek. V případě potřeby můžete použít podobný přístup i v předchozích příkladech.

Příklad HTML a CSS: Zaoblení rohů pomocí pseudoprvků

web - Zaoblování rohů v CSS pomocí pseudoprvků

Blokovat obsah.

pozadí a pomocí něj je umístíme na pravou stranu a zakážeme „reprodukci“. To je vše, rohy jsou připraveny.

Protože jsme specifikovali výplň pro „blok“ (CSS), pseudoprvky, a tedy rohy, nejsou umístěny v rozích bloku, ale jsou 15px od okrajů. Abychom to napravili, dáváme pseudoprvkům negativní okraje (CSS) na potřebné strany, aby byly umístěny na odsazení. Ale děláme okraje rovné ne 15, ale 17px, to je nutné pro pokrytí rámečku (CSS), jehož šířka je 2px (15+2=17). To je vše.

Pro IE6 a IE7 jsme použili již známé "berličky" s vkládáním HTML kódu sem, protože tyto prohlížeče nerozumí zde použitým pseudoprvkům:

Pomocí výrazu integrujeme do hlavního prvku dva tagy, které také převedeme na bloky. Pak do nich umístíme jednu visačku. A pak mají tyto značky stejné vlastnosti jako pseudoprvky. Jediné, co je, dodatečně přidáme CSS vlastnost :relative, bez které rám překrývá rohy.

Nevýhodou této metody je, že nelze explicitně nastavit výšku bloku se zaoblenými rohy, protože pokud přesahuje velikost obsahu, pak se spodní rohy nebudou přitlačovat k okrajům. Tomu se lze vyhnout, pokud hlavní obsah stále uzavřete do jiného bloku a nastavíte jeho výšku.

Další příklad zaoblení rohů s pseudoprvky a bez přídavných bloků

Tento příklad je podobný předchozímu, ale zde používáme umístění k uspořádání pseudoprvků. Díky tomuto přístupu bylo možné explicitně specifikovat výšku bloku se zaoblenými rohy.

Příklad HTML a CSS: Zaoblení rohů, kde můžete změnit výšku bloku

web - Zaoblení rohů v CSS pomocí pseudoprvků, kde lze nastavit výšku bloku

Blokovat obsah.

A znovu, pro IE6 a IE7 přidáme několik dalších prvků do hlavního bloku pomocí výrazu a zavřeme kód v podmíněných komentářích. Tentokrát se ani nepokusíme napodobit pseudoprvky, ale uděláme to jednodušeji.

Do „bloku“ přidáme čtyři značky a aplikujeme na ně pozici. A pak jim jednoduše ukážeme rohy obrázku jako pozadí a umístíme je do rohů hlavního prvku. To znamená, že jednáme přesně jako v jedné z výše diskutovaných metod.
Chcete-li se zbavit chyby s jedním pixelem (která byla výše zmíněna více než jednou), přidejte k prvkům pravého rohu levý okraj (CSS) se 100% hodnotou a záporným posunem rovným -9px. Obecně, pokud si pamatujete, toto odsazení by se mělo rovnat šířce rohového bloku (u nás je to 11px), ale nezapomeňte na 2px okraj, který zde máme - musíme na něj umístit rohy (11px-2px=9px).

Mimochodem, ve skutečnosti by bylo jednodušší emulovat pseudoprvky, jako jsme to udělali v předchozím příkladu – takto by bylo méně dodatečného kódu. Ale ne v IE6, tento prohlížeč by potřeboval několik dalších „berliček“ a v důsledku toho by musel napsat dvě samostatné podmíněné komentáře- pro IE6 a IE7, a to by jen nafouklo kód...

Ve Firefoxu tato metoda funguje správně od verze 3.6 a v Opeře - od verze 10.0 jsem pro ně nepřišel s berličkami, protože je to málo relevantní.

Vezměte prosím na vědomí, že styly CSS pro daný tvar jsou do souboru vloženy jednou, ale značku HTML lze na web umístit neomezeně mnohokrát.

Jako výsledek výstupu dostaneme následující obdélník s rámem.

Jak vytvořit zaoblené rohy v CSS

Atribut se používá k zaoblení rohů hraniční poloměr.

Mohli bychom přidat právě tento atribut. Normálně zobrazuje výsledek zaokrouhlení v nových verzích prohlížečů, ale mnoho uživatelů má stále starší verze, kde tento atribut nefunguje správně. Z důvodu kompatibility proto do našeho bloku v souboru Style.css přidáme několik dalších popisů tohoto atributu, svázaných přímo s určitými prohlížeči, a výsledkem bude následující kód:

HTML tag div nám dá obdélník v rámu se zaoblenýma rohy:

a HTML tag pro zobrazení textu bude vypadat takto:

pib9.ru

Dostaneme zaoblený obdélník a text:

Pokud z kódu odeberete atributy popisu velikosti obdélníku šířka A výška, pak můžete získat následující tvary se zaoblenými rohy:

1. Žádný text

V tomto případě formuláře nabývají rozměrů prostředí: délka odpovídá šířce pole a výška se mění podle toho, jak je formulář naplněn obsahem.

Zaoblete vybrané rohy

V popisu stylu parametr 10px v atributu hraniční poloměr ukazuje poloměr zakřivení, který lze změnit výběrem toho, který potřebujete. Pokud je nastaveno na 0, zaokrouhlování nebude probíhat. Tuto vlastnost lze použít, když potřebujete zaoblit vybrané rohy.

Zapišme si hodnoty poloměru zaoblení pro každý roh s uvedením nul, kde zaoblení zrušíme. Zrušme například zaoblení ve třetím a čtvrtém rohu. Náš kód bude vypadat takto:

1. Levý horní roh.

2. Pravý horní roh.

3. Pravý dolní roh.

4. Levý dolní roh.

Výsledkem je obdélník s vybranými křivkami pouze v horních rozích.

Úhly se počítají ve směru hodinových ručiček, počínaje od levého horního rohu:

2. Zaoblení rohů pomocí HTML kódu bez zápisu do souboru stylu

Podívejme se na druhý způsob, jak získat obdélník se zaoblenými rohy pomocí HTML kódu bez zápisu do souboru stylu.

HTML zaoblené rohy

Existuje jedna malá funkce, která celý proces ještě více zjednodušuje – tato HTML zaoblené rohy. Spočívá ve vygenerování HTML kódu, který obsahuje stejné styly jako v CSS kódech. To využívá stejné atributy jako v bloku CSS a eliminuje potřebu zapisovat blok do souboru Style.css. Jedním slovem zcela nahrazujeme kód CSS kódem HTML.

Místo našeho CSS bloku získáme HTML skript, který vložíme na místo, kde se má objevit obdélník se zaoblenými rohy:

První způsob zaoblení rohů lze použít, když je stejný tvar použit více než jednou beze změny stylů. Druhá metoda se používá pro formuláře, jejichž styly jsou použity jednou.

3. Obrázky se zaoblenými rohy. Rám kolem obrázku HTML

Chci vám také poskytnout užitečné informace. Často pomocí obrázky pro návrh webových stránek, opravdu je chci udělat ještě krásnější změnou jejich tvaru, orámováním rámem krásné barvy a různých šířek. To vyvolává otázku: „ Jak zaoblit rohy obrázku?”.

To se provádí velmi jednoduše a nyní se naučíme, jak to udělat.

Umístěme obrázek na web a udělejme z něj vlastní pozadí jako pozadí tagu div. Získáme následující kód a obrázek:

Zaoblení rohů obrázku přidáním rámečku

Zaoblení rohů obrázků v CSS a HTML a přidání ohraničení lze provést jedním ze dvou výše popsaných způsobů.

Při použití první metody v tomto článku budou kódy obrázků pro soubor stylu a HTML kód značky div vypadat takto:

Vezměte prosím na vědomí, že některé atributy lze zadat do souboru stylu a některé do tagu div. V našem případě jsou rozměry obrázku šířka a výška vloženy do HTML kódu.

HTML kód druhé metody bez použití souboru stylu popsaného v tomto článku vypadá takto:

V důsledku kódů každé ze dvou metod dostaneme stejný výsledek - obrázek se zaoblenými rohy:

Tradiční pravoúhlé rohy v designu webových stránek už každého dávno omrzely. V módě jsou zaoblené rohy, které se nedělají pomocí obrázků, ale prostřednictvím stylů, pro které se používá vlastnost border-radius. Tato vlastnost může mít jednu, dvě, tři nebo čtyři hodnoty oddělené mezerou, které určují poloměr všech rohů nebo každého jednotlivě.

V tabulce 1 ukazuje jiný počet hodnot a typ bloku, který je v tomto případě získán.

Kód	Popis	Pohled
div ( border-radius: 10px; )	Poloměr zaoblení pro všechny rohy najednou.
div ( border-radius: 0 10px; )	První hodnota nastavuje poloměr levého horního a pravého dolního rohu, druhá hodnota nastavuje poloměr pravého horního a levého dolního rohu.
div ( border-radius: 20px 10px 0; )	První hodnota nastavuje poloměr levého horního rohu, druhá - pravý horní i levý dolní a třetí hodnota - pravý dolní.
div ( border-radius: 20px 10px 5px 0; )	Postupně nastavuje poloměr levého horního, pravého horního, pravého dolního a levého dolního rohu.

Příklad 1 ukazuje, jak vytvořit blok se zaoblenými rohy.

Příklad 1. Rohy bloku

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Poloměr

Já je suplementační forma akuzativu I.

Výsledek tohoto příkladu je znázorněn na Obr. 1.

Rýže. 1. Blok se zaoblenými rohy

Zajímavého efektu lze dosáhnout, pokud nastavíte poloměr zaoblení na větší než polovinu výšky a šířky prvku. V tomto případě získáte kruh. Příklad 2 ukazuje, jak vytvořit kulaté tlačítko s obrázkem.

Příklad 2: Kulaté tlačítko

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Knoflík