På senare tid har det kommit fram ett gäng olika lösningar på problemet att förse en textruta med rundade hörn med CSS (dvs utan att ta hjälp av tabeller).
Jag har tagit mig friheten att samla ihop länkar till några av de, som jag tycker, mest intressanta lösningarna här…
AListAparts grundlösning
Creating Custom Corners & Borders av Søren Madsen
Lösningen som presenteras bygger på att man lägger upp en speciell (x)HTML-struktur, och sedan “petar dit” fyra olika bilder för att ge hörn- och skuggeffekter på textrutan.
“Custom Corners and Borders” funkar bara mot enfärgade bakgrunder
Creating Custom Corners & Borders part II av Søren Madsen
En vidareutveckling av ovanstående som också fungerar mot icke-enfärgade bakgrunder.
Ryan Thrash “Skräplåda”
The TrashBox (skapad av Ryan Thrash) kallas en lösning som i mångt och mycket liknar AListAparts första lösning.
Det finns dock skillnader i den (x)HTML som används för att bygga upp textrutan - och det finns en del folk på nätet som tycker att denna är “kodmässigt snyggare” än lösningen i “Creating Custom Corners & Borders”.
Dan Cederholms bergstoppar
Dan Cederholm vänder så att säga uppochned på hela rundningskonceptet genom att lägga den genomskinliga delen av “hörnbilderna” inåt mot rutans innehåll istället för utåt mot bakgrunden (vilket gör att denna metod också bara funkar mot enfärgade bakgrunder - men att den “rundade rutan” kan ges olika färger mha CSS utan att det behövs fler än en uppsättning “hörnbilder”)
Roger Johanssons “Teaser boxes”
Det som skiljer denna lösning från de övriga är främst att den här lösningen bara kräver en bakgrundsbild! (fast då krävs å andra sidan att rutorna ges fixerad bredd)
456 Berea Street: Teaserbox revisited
Roger Johanssons vidareutveckling av “Teaser Boxen” som klarar av att runda av kanterna även på en helt “lealös” ruta (dvs den textbox som ges runda hörn kan ha både dynamisk höjd och bredd utan problem)…
Och detta med bara *två* bakgrundsbilder.
Imponerande!
Vilken är bäst då ?
Ehm…
Liksom skönhet endast existerar i blicken hos dess betraktare så antar jag att det är upp till dig, käre läsare, att - om du vill - välja att favorisera en lösning över en annan ;)
