Soluun pyöristetyt kulmat

Nifty corners nimellä löytyy asiasta enemmän, joskus tuota kokeilinkin..





Palstoitus

body {
background: #e6e6fa;
margin: 10px;
padding: 0px;
}
#container {
width: 400px;
height: 80%;
position: absolute;
left: 10px;
top: 65px;
}
.first {
position: absolute;
top:41px;
width: 100px;
height: 100%;
}
.second {
position: absolute;
left:100px;
top:41px;
width: 300px;
height: 100%;
}
ul {
margin: 0px 0px 0px 25px;
padding: 0px 0px 0px 0px;
}
div#nifty {
margin: 0px 0px 0px 0px;
background: #9BD1FA;
width: 400px;
}
div#nifty_b {
margin: 0px 0px 0px 0px;
background: #9BD1FA;
width: 90px;
}
div#nifty_c {
margin: 0px 0px 0px 0px;
background: #9BD1FA;
width: 300px;
}
div#nifty_c p {
margin: 10px;
}
div#nifty_c img {
margin: 10px;
}
h1 {
padding: 0px 0px 0px 10px;
}
b.rtop, b.rbottom {
display:block;
background: #e6e6fa}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #9BD1FA
}
b.r1 {
margin: 0 5px
}
b.r2 {
margin: 0 3px
}
b.r3 {
margin: 0 2px
}
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;
height: 2px
}






Otsikko









linkki1
linkki2
linkki3
linkki4











Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Firefoxilla onnistuu, kun pistät

-moz-border-radius: 10;

tai

-moz-border-radius: 10 10 10 10;

Luvut komennon perässä tarkoittavat neljän kulman kaaren sädettä. Siis mitä isompi luku, sitä isompi kaari. Ylimmäisessä se määrittelee kaikki kulmat samanlaisiksi, alimmaisessa kulmat voi määritellä erikseen.

HUOM! Muistaakseni kulmien pyöristys näin ei vaikuta taustakuvaan, eli jos solussa on taustakuva, niin se "vuotaa" reunaviivan ali neliskanttisena.

Kulmat ovat Firefox 2:ssa vielä pehmentämättömät, mutta tulevassa Firefox 3:ssa reunojen pehmennys jo löytyy.

http://www.css3.info/preview/rounded-border.html

Internet Explorerissa tätä ominaisuutta ei ole, joten siinä katsoen kulmat ovat neliskanttiset. Tämä on monien mielestä ihan OK, eli neliskanttiset reunat eivät haittaa, mutta Firefoxin käyttäjät saavat ekstraa.

Muilla menetelmillä pyöristettyjen kulmien teko menee melkoiseksi kikkailuksi.

Solua et pysty pyöristämään mutta kuva/kuvat/värikenttä sen sisällä. Solu on aina neliskulmanen.

Miksei toimi?

otteko ihan pöllöjä?

Yksinkertaista. Ej kuvia. Ei kulmia Ei pyöreitä nurkkia. Vaan pyöreet kulmat:

http://www.albin.net/CSS/RoundedCorners/