Postavite u <img> tag sljedeću klasu sa ovim property-jima:
img.obli-kutevi {
border-radius: 25px;
-moz-border-radius: 15px;
}
To možete napraviti i pojedinačno za svaki kut slike. Npr.
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;
...ili čak ovako:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;
Radi kompatibilnosti sa Mozilla-om (Firefox) uvijek koristite ove pandane....
W3C |
Mozilla (Firefox) |
border-radius |
-moz-border-radius |
border-top-left-radius |
-moz-border-radius-topleft |
border-top-right-radius |
-moz-border-radius-topright |
border-bottom-right-radius |
-moz-border-radius-bottomright |
border-bottom-left-radius |
-moz-border-radius-bottomleft |
Za kraj evo nekoliko primjera upotrebe za različite oble oblike kuteve:
#Primjer_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#Primjer_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
#Primjer_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
#Primjer_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
#Primjer_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
#Primjer_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}
Nadam se da sam pomogao.