Kulaté rohy - round corners

Zdravím,
hned na úvod bych rád řekl, že toho není tolik, jak to na první pohled vypadá. Nuže. Již nějaký ten den řeším problém týkající se kulatých rohů. Mé požadavky jsou zhruba následovné:

– Mít pouze jeden HTML kód (co nejvíce sémantický = co nejméně zbytečných prvků), kterým mohu obalit jak řádkové, tak blokové elementy (takže jak jedno slovo, tak i celý odstavec)
– Mít co nejméně CSS kódu, který rozezná (při nejlepším automaticky, při nejhorším pomocí použití dvou různých tříd v HTML kódu), zda-li se jedná o řádkový (viz náhled) či blokový (viz náhled) element
– Výsledek musí být fluidní dle obsahu, nikoli fixní na určitou šířku/výšku. To znamená že když to místo jednoho slova budou dvě nebo když v odstavci zvětším písmo, nic se nerozsype.
– Rohy musí být průhledné. Tzn, že na nich nebude zub, když daný prvek podložím například fotkou. Nebo jinak: Pokud změním v následujících příkladech barvu na pozadí, plynně se tato barva zdědí i na rohy a nikde nemusím nic víc měnit. To znamená, že se používá průhledný obrázek a vše se řeší přes barvy na pozadí různých prvků.
– Žádné použití JS ani ničeho jiného. Opravdu čistě jen HTML+CSS.
– Totožné zobrazování ve všech místních majoritních prohlížečích. To znamená IE6, IE7, FF3, OP9 i Chrome.
– Pro své příklady prosím používejte kostru, jakou mají oba níže uvedené příklady. Jde hlavně, aby různé dílčí kódy měly nějakou formu, aby se v tom člověk vyznal a aby byl prohlížeč díky DOCTYPU ve standardním režimu.
– Snažte se použít co nejméně obrázků, nejlépe jeden, konkrétně tento.
– Cílem je udělat co nejjednodušší řešení, takže se prosím vyhněte řešením jako jsou Nifty corners, různé znaky místo obrázků a tak podobně.

1. řešení:
– Problémem je, že při změnění barvy na pozadí zůstanou na rozích zuby. Podklad každého rohu je totiž určen zvlášť ve stylu. Výhodou je malá výška u inline elementu.

2. řešení:
– Peoblémem je tentokrát naopak výška, kdežto rohy jsou zde v pořádku. Schválně si skuste změnit barvu pozadí, rohy to nerozhodí.

U obou příkladů je hlavním problémem neuniverzálnost na inline/block elementy - musí se určit ručně - třídou. Tak co, pokusí se někdo vyřešit tento zdáním malý problém? Budu vděčný i za jakoukoli radu či dílčí kód.

Ále notak, chlapi. Snad jste se nelekli takového zadání :-). Takoví chytří lidé se tu pohybují a najednou jsou všichni sticha... opravdu budu vděčný i za jakýkoli nápad, který mě třeba i jen malinko posune k cíli ;-)

RockFire
Díky, i snaha se cení. Bohužel je to tak, jak píše Nox.

Tak jo, já to teda zjednoduším, protože takto to asi nepůjde:

Stačí, když bude jen jeden HTML kód a výsledek (inline/block) se bude měnit pomocí třídy aplikované na obalový element :-)

yFang
Díky za upozornění. Ale jak jsem již (možná) psal: Ani jedno není dokonalé - kdyby bylo, nic bych tu nemusel řešit ;-)

yFang
Díky, našel. Právě to procházím - už jsem za půlkou ;-)