Pyöristetyt kulmat divissä

Xcode, Mac OS X Server sekä muuta hauskaa ja hyödyllistä
jhh
Viestit: 322
Liittynyt: 8.12.2006 klo 10.04

Pyöristetyt kulmat divissä

Viesti Kirjoittaja jhh »

Kun laitan maincontent diviin "käskyn"

-moz-border-radius:6px;

, niin miksi se pyöristää ainoastaan divin alarenat? Yläreunat jää pyöristämättä...
Ylös
lassem
Viestit: 24
Liittynyt: 26.3.2010 klo 10.31

Re: Pyöristetyt kulmat divissä

Viesti Kirjoittaja lassem »

Olisiko divin sisällä joku toinen elementti joka peittää pyöristetyt reunat? Tuo CSS-ominaisuus on kyllä oikein.
iMac · iPad · iPhone ·  TV
Ylös
Aaaron
Viestit: 1275
Liittynyt: 24.3.2006 klo 19.30
Paikkakunta: Ulkomailla

Re: Pyöristetyt kulmat divissä

Viesti Kirjoittaja Aaaron »

Tuo toimii sitten vain Firefoxissa ja on selainkohtainen epästandardi laajennos. Muilla selaimilla on vastaavia, mutta kannattaa tehdä tuo näin:

-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;

Myös vanhemmille IE-selaimille on omat virityksensä, mutta yleensä ei kannata nähdä vaivaa kulmien pyöristämiseksi kaikissa selaimissa, vaan riittää, että pyöristystä tukevissa toimii ilman erikoisia hackeja.
Ylös
aritko
Viestit: 420
Liittynyt: 22.9.2009 klo 11.44

Re: Pyöristetyt kulmat divissä

Viesti Kirjoittaja aritko »

lassem kirjoitti:Olisiko divin sisällä joku toinen elementti joka peittää pyöristetyt reunat? Tuo CSS-ominaisuus on kyllä oikein.
Mitä todennäköisimmin tilanne on juuri tämä.
esim. jos sinulla on

Koodi: Valitse kaikki

<div>
<h1>otsikko</h1>
</div>
Ja otsikolla on taustaväri, niin divissä pyöristyy vain alakulmat.
EDIT: Tai siis kyllä ne kaikki kulmat pyöristyy, mutta otsikon taustaväri peittää ne.
Viimeksi muokannut aritko, 13.3.2011 klo 22.02. Yhteensä muokattu 2 kertaa.
Ylös

Palaa sivulle “Ohjelmointi, skriptit ja palvelimet”