Witam
Mam kilka obrazków na swojej stronie i chciał bym aby każdy z nich miał zaokrąglone rogi - i chcę to zrobić w kodzie, ale nie wiem jak ? Nie chciał bym rysować w każdym obrazku zaokrągleń tylko mieć jakieś uniwersalne jak to zrobić ?
Sprawa nie jest taka prosta… poniewaz chodzi o zaokraglenie obrazków.
Wyjściem byłoby wpisanie w google “zaokrąglone rogi obrazków w css”,
ale na szybko odpowiedzieć mogę, że żadne border-radius dla img nie będą działać.
Najłatwiej ubrać każdy obrazek w jakiś kontener i kombinować z overflowem kontenera.
np.
[/code]
Nie jest to najładniejsze wyjście. Ale mniej więcej daje pojęcie o sytuacji. Dalsze szukanie po ang. zwłaszcza stronach może nam znaleźć gotowe wtyczki do jquery robiące podobne rzeczy.
Możesz też umieścić obrazek jako tło DIVa, w którym umieścisz kolejnego DIVa z zaokrąglonymi rogami. Bez żadnego overflowa.
Ja pomyślałem, że na obrazek nałożę przezroczysty obrazek z zaokrąglonymi rogami ? tylko jak dać obrazek na obrazek ?
Pozwolę sobie na dygresję i dyskusję ;p
To rozwiązanie jest oczywiście dobre - i sam często je stosowałem, ale niepolecane. Powoduje ono że ze struktury dokumentu znika obrazek.
Jeśli mamy do czynienia z ozdobnikiem, czemu nie. Jeśli takie rozwiązanie stosujemy w galerii odnośnie zdjęć… jest to semantycznie (;p) niepoprawne.
Obrazek na obrazek możesz dać…korzystając z kontenerów i pozycjonowania absolutnego lub stosując obrazek jako background dla obrazka przezroczystego png. 
więc koniec końców sytuacja naprawdę nieopłacalna. Nie polecam tej motody.
Jeśli masz problemy z rozkimaniem tego w CSS zagłęb się następujące właściwości stylów:
border-radius - zaokrągla rogi
overflow - określa co robić z elementami wykraczającymi poza rame obecnego elemetu
position - ustawia tryb pozycji
top, left, right, bottom - ustalają odstepy od góry, lewa, prawa, dołu.
i naprawdę poszukaj w internecie rozwiązań… wyważasz szeroko otwarte drzwi, szkoda Twoich i naszych sił na to.
z canvas i js (nie wiem dlaczego nie działa z Firefoxem, w Operze jest ok)
function zaokraglijRogi(img, size){
if (size>img.width/2 || size>img.height/2)
size = (img.height>img.width)?img.width/2:img.height/2;
var canvas = document.createElement('CANVAS');
canvas.setAttribute('width', img.width);
canvas.setAttribute('height', img.height);
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
ctx.globalCompositeOperation = 'destination-in';
ctx.beginPath();
ctx.moveTo(size, 0);
ctx.lineTo(img.width-size, 0)
ctx.arc(img.width-size, size, size, -Math.PI/2, 0, false);
ctx.lineTo(img.width, img.height-size);
ctx.arc(img.width-size, img.height-size, size, 0, Math.PI/2, false);
ctx.lineTo(size, img.height);
ctx.arc(size, img.height-size, size, Math.PI/2, Math.PI, false);
ctx.lineTo(0, size);
ctx.arc(size, size, size, Math.PI, 3*Math.PI/2, false);
ctx.fill();
img.setAttribute('src', canvas.toDataURL());
}Z tymi szeroko otwartymi drzwiami to lekka przesada w tym przypadku, a jeśli chodzi o oszczędność sił, to można dodać, że border-radius działa tylko w przeglądarce Firefox czy Chrome więc szkoda sił na szukanie jeśli strona ma być i pod inne przeglądarki. 
Też w Operze i Safari. I ponoć IE9 również. Zostaje tylko IE6, 7, 8… ;p
Niezła resztówka stanowiąca 70% rynku Na dodatek w Operze trzeba użyć np. polecenia:
border-radius: 0 0 20px 20px w Firefoksie -moz-border-radius: 0 0 20px 20px; a w Chrome też trochę inaczej działa. W innych przeglądarkach też pewnie różnie bywa, jednym słowem nieźle.
Jakoś nie widzę żeby to działało pod IE. 