Runde hjørner uden billeder?

Tags:    html css

Hej, jeg kunne godt tænke mig at høre, om der var en måde man kunne lave runde hjørner uden brug af billeder? Jeg ved dette er muligt, men her kommer mit problem med det.

Siden jeg er igang med, skal kunne køre med de fleste browsere, helst alle. De round corners jeg har prøvet, hvor man ikke skulle bruge billede, har ikke engang virket i IE / FF / Chrome på samme tid.

Hvis dette 100% ikke er muligt, er det så muligt at lave det med billeder, hvor man kun i CSS'en skal ha' kode for at lave .Round (mine bokse) om til at ha' runde hjørner?



Det kan laves med CSS3, har desværre ikke så meget forstand på CSS3.
Men du kan prøve at kigge her: http://www.css3.info/preview/rounded-border/

Ellers kan du prøve at google "CSS3 Rounded Corners". Det skulle gerne give noget :)



Er der ikke noget med, at de kun vil virke med IE 9>? og andre browsere også selvfølgelig, men kun nyeste versioner af dem. Det er en side for "folket" så skal virke med mange browsere, feks IE 7>



Nej, det er ikke muligt i alle browsere. I IE9 og Opera kan du bruge border-radius fra CSS3. I Firefox kan du bruge -moz-border-radius, og i Safari/Chrome kan du bruge -webkit-border-radius. Men der er altså ingen mulighed uden HTML og billeder i IE8 og ældre.



Vent med det til de fleste browsere understøtter det. Der findes dog nogen javascript alternativer, som selvf. kræver lidt javascript kode der skal ind på siden, men det kan så lave det helt uden billeder og uden brug af css3 - og det virker således både i IE 7, chrome, safari, firefox m.v.



Alternativt kan løsningen klares med javascript, hvorfor markup stadig kan være semantisk, uden en masse unødvendige tags.

Se ex: http://www.methvin.com/jquery/jq-corner-demo.html



t