Er det mulig å lage runde hjørner på en container i css?

[P0nduz]

Hei

 

Lurer ganske enkelt på om det ermulig å lage runde hjørner i css uten å bruke bilder?

 

 

På forhånd takk for svar:)

 

Mvh

Jan Christer

[Skagen]

Du kan gjøre det med CSS3, men er kun Firefox og Safari som foreløpig støtter dette: http://www.css3.info/preview/rounded-border/

[Dieter]

Som nevnt kan du bruke css3 men du kan også bruke jquery som her:

 

http://www.atblabs.com/jquery.corners.html

[P0nduz]

Takker da får jeg det sikkert til. er helt nybegynner på dette så kommer sikkert flere spørsmål.

 

mvh

Jan Christer

[FrodeNilsen]

Du kan gjøre det med CSS3, men er kun Firefox og Safari som foreløpig støtter dette: http://www.css3.info/preview/rounded-border/

 

Desverre så er støtten heller rusten. Og det er den diplomatiske måten å si det på.

 

Jeg testet dette under Ubuntu for rundt to uker siden (web-kit, Opera 10, FF, men ikke Safari). Problemet er klipping av forgrunds elementer, og om dette skal klippes. En annen er at det ikke støttes to variable i hjørner.

 

Klipping er ett stort problem, og kantlinje klipping så ikke ut til å fungere i det hele tatt.

 

I korte trekk så er vi ikke der enda, men det virker som om dette kommer om ikke altfor lenge.

 

Frode

[Skagen]

Det kan fungere til veldig enkle sider, men jeg er enig i at det langt ifra fungerer godt. Ønsker man samtidig at siden ser lik ut på flest mulig nettlesere så har man jo egentlig ikke noe annet valgt enn CSS2 med hjørnebilder.

[4588pkdkrikue5c]

Som det vart nemnt her må du nok, og bør nok bruke bilder. Internet Exporer er framleis mykje brukt, og den har såvidt støtte for å surfe på sider utan Microsoft i adressa og egenoptimalisert kode. Men du må nesten bere tenke det kva som er enklast. Eg broker mye å ha eit heilt bilde oppe (med hjørner på kvar side), og eit nede. Du kan naturligvis ha noko i kvart hjørne, men to bilder framfor fire sparer deg for mykje tid. Då kan berre skrive slik:

#boksmedhjorner {
background:url(bgmedhjorner.png) top #ccc;
width:800px;
height:500px; 
}

 

Arrester meg om eg skriv feil no - det er framleis tidlig for meg!

Redigert: Då kjem altså hjørnene på toppen. Om du kan ha fleire bakgrunn-url'ar på ein div er eg ikkje sikker på, men du kan jo uansett berre lage ein class nederst i diven du allereie har om du forstår?

 

Lukke til!

Endret 28. februar 2009 av steffenz