Code bo tròn ảnh với CSS3: vui thôi, chứ nó cũng không hay dùng lắm trên các website đơn giản

Sử dụng CSS3 bạn sẽ thấy bo tròn ảnh rất dễ dàng, không cần phải dùng Photoshop nữa, chỉ với 3 dòng code bức ảnh đã được bo và chạy tốt trên tất cả các trình duyệt phổ biến, cụ thể thì với IE9+, Firefox 4+, Chrome, Safari 5+ và Opera là OK.

Code mẫu như sau, giả sử bạn có bức ảnh với mã như thế này trong HTML:

<img src="images/con-meo.jpg">

Muốn bo tròn tuyệt đối, bạn sẽ CSS ảnh đó như này:

img {
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}

Các tiền tố -moz và -webkit là để tương thích với các trình duyệt khác nhau. Chú ý là ảnh của bạn phải là hình vuông nhé.

Nếu muốn bo tròn góc nhỏ hơn bạn có thể để 5%, 10%, 20%…Hoặc bất kỳ giá trị nào mà bạn cảm thấy vừa mắt, bức hình dưới đây có border-radius là 15%:

Sau khi bo xong ảnh, bỗng dưng tôi muốn bo luôn chữ, ý tưởng vẫn thế, sẽ cho chữ ở chính giữa đường tròn, sau khi mày mò một lúc thì đây là kết quả:

Đoạn code mẫu đây:

<div style="background: #dddddd; border-radius: 50%; border: 2px solid #a1a1a1; height: 300px; margin: 20px; padding: 10px; text-align: center; width: 300px;">
<h2 style="font-size: 22px; margin-top: 33%;">Tôi Sẽ Bo Tròn Tuyệt Đối Đoạn Văn Bản Này, Bạn Xem Như Này Đã Ưng Mắt Chưa</h2>
</div>

Tôi đặt đoạn văn bản trong thẻ h2 và cho vào thẻ div. Ở thẻ div, tôi quy định cụ thể chiều cao và chiều rộng bằng lệnh height: 300px; width: 300px; Vì mục đích của chúng ta là làm hình tròn cho nên tôi để chiều cao bằng chiều rộng.

2 thuộc tính background: #dddddd; border: 2px solid #a1a1a1; sẽ làm div có màu xám và đường viền 2px nét liền. Để padding: 10px làm chữ không bị chạm vào cạnh của div

Để chữ căn chính giữa theo chiều ngang ta quy định text-align: center; Cuối cùng là cho div thành hình tròn bằng thuộc tính border-radius: 50%; 

Để chữ ra giữa theo chiều dọc, ta điều chỉnh lề cho thẻ h2 bằng cách để lề trên margin-top: 33%; Giá trị này còn tùy thuộc vào kích cỡ của chữ, nhưng sẽ không bao giờ lớn hơn 50%.

Xem thêm: cách làm mờ ảnh với thuộc tính opacity.