Cách bo tròn hình ảnh với CSS3 – không Photoshop

Trong thiết kế web sử dụng hình ảnh bo tròn là điều thường thấy đối với trước đây bạn muốn tạo một hình bo tròn phải dùng đến photoshop hoặc công cụ chỉnh sửa hình ảnh nào đó, tuy nhiên hiện nay thì mọi thứ đã quá dễ dàng cho ác bạn khi đã có CSS3. Để CSS3 hoạt động được thì trình duyệt phải hỗ trợ sử dụng cụ thể các là: Google Chrome, Opera hay các phiên bản IE9+, Firefox 4+, Safari 5+ đều sử dụng được chức năng này.

Ở những bài trước mình đã đề cập đến vấn đề bo góc trong css và bài này mình chỉ sử dụng lại để áp dụng vào một tình huống khác đó là hình ảnh. Để làm được bạn cần có một hình vuông (vuông tuyệt đối) vì hình tròn thì nó rất đều nên như thế mới phù hợp. Đầu tiên bạn vào HTML chèn vào hình ảnh như bình thường.

     <img src="bcdonline-img.jpg" />

Tiếp đến chúng ta bo góc cho hình bằng CSS từ những câu lệnh: border-radius, -moz-border-radius, -webkit-border-radius. Ở đây các thông số bạn có thể cho % hoặc px đều được nha. Để bo tròn tuyệt đối bạn dùng 50% mỗi câu lệnh. Hình demo của mình bên dưới hình đầu là mình để nguyên, hình sau thứ 2 mình mình bo tròn 50% và hình thứ 3 15%.

Bo tròn hình ảnh bằng css

Code trong css mình viết như sau, tất nhiên là bạn có thể thay đổi % hay px tùy thuộc vào nhu cầu mà bạn sử dụng.

    #img1 img {
    }
 
    #img2 img {
        border: 1px #d4d4d4 solid;
        padding: 7px;
        border-radius:50%;
        -moz-border-radius:50%;
        -webkit-border-radius:50%;
    }
    
    #img3 img {
        border-radius:15%;
        -moz-border-radius:15%;
        -webkit-border-radius:15%;
    }

Như bạn thấy hình 1 mình không định dạng css gì hình thật của nó. hình thứ hai mình thêm cái viền vào nhìn cho nó đẹp xíu