CSS góc tròn trên một vấn đề ảnh

Question

Tôi đang gặp rắc rối làm tròn các góc của một img sử dụng CSS3:

Đây là mã Tôi đang sử dụng:

img.event-thumbimage { 
    height:120px; 
    width:140px; 
    -webkit-box-shadow: 0px 0px 10px 0px #4d4d4d; 
    -moz-box-shadow: 0px 0px 10px 0px #4d4d4d; 
    box-shadow: 0px 0px 10px 0px #4d4d4d; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    -khtml-border-radius: 8px; 
    border-radius: 8px; 
    border:solid white 3px; 
    float:left; 
    margin-right:25px; 
    } 

Như bạn có thể thấy, đường viền ngoài được làm tròn nhưng img thực tế được bình phương. Sử dụng CSS3 làm thế nào tôi có thể làm tròn các góc trên hình ảnh thực tế?

Answer 1

sử dụng hai container, cả với các góc được làm tròn (không phải là img), và đừng quên các overflow: hidden trên bên:

mã ví dụ ở đây: http://jsfiddle.net/jackJoe/YhDXm/

Answer 2

Đặt <div> xung quanh hình ảnh và áp dụng border-radius cho trình bao bọc đó. Thêm overflow: hidden; và bạn tốt để đi. Điều này là do <img> thẻ không thể có góc tròn.

Answer 3

Một câu trả lời tương tự như trước hai. Sử dụng một khoảng xung quanh hình ảnh và áp dụng bán kính đường viền cho cả hai.

Có một Chi tiết hơn ở đây: http://easierthan.blogspot.co.uk/2012/12/code-tip-2-rounded-borders-on-images-in.html

Một số trình duyệt đang bắt đầu để xử lý tốt hơn này, nhưng vẫn còn trường hợp mà vuông của hình ảnh thể hiện qua.