Keskustelu: Nettisivujen teko: Elementtien reunojen muotoilu?

Mikähän mahtaisi olla helpoin tapa tehdä diveilä tehdylle elementeille "pyöreät reunat" eli siis että se "laatikko" ei olisi ihan neliskanttinen vaan ne olis tosiaan hiukas niinkuin pyöristetyt ?

Ainoa keino mikä itselle tulee mieleen on rakentaa taustakuva joka on sen elementin kokoinen ja siinä olis ne pyöristetyt reunat ?

Mutta parempia/helpompia/oikeampia keinoja toivotaan neuvottavan.

t: KingLittle

Eipä oikeastaan paremmin/helpommin voi tehdä.
Teet esim. neljän divin sisään sisällön, joista jokainen div sisältää esimerkiksi yhden pyöristetyn kulman. Tällöin sisällön kokoa voi muuttaa ja reunat liikkuvat mukana.

Öö mites se kuvan pyöristetty reunus sekä css:ssä määritelty "html" reunus sitten synkataan niin että ne osuu kohdakkain ? Voitko näyttää jonkun esimerkin tuosta ?

taustakuvan voi sijoittaa divien kulmiin:

.topleft{
background-image:url(kuvatl.jpg);
background-align:top left;
}
.topright{
background-image:url(kuvatr.jpg);
background-align:top right;
}
.bottomleft{
background-image:url(kuvabl.jpg);
background-align:bottom left;
}
.bottomright{
background-image:url(kuvabr.jpg);
background-align:bottom right;
}

Eli nuo peittää silloin sen css:n reunuksen terävän kulman ? Mikä kuvaformaatti on tuohon käyttöön paras, gif ?

KingLittle kirjoitti:

Mikä kuvaformaatti on tuohon käyttöön paras, gif ?

Suosittelen png:tä.

läpinäkyvät png-kuvat eivät ole vieläkään kaikkien käyttäjien ulottuvilla, joten suosittelen silti joko gif(soveltuu paremmin pieniin kuviin ja käytössä läpinäkyvyys) tai jpeg kuvia.

Kirjanmerkkien syövereistä löytyy ratkaisu ilman ylimääräistä HTML:ää: http://www.virtuelvis.com/gallery/css/rounded/
Ei toki toimi IE:llä, mutta minusta HTML:n puhtaus on sen arvoista.