Code bo tròn ảnh với CSS3

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/cap-doi-hoan-canh.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%;
}

Kết quả bạn sẽ thấy giống bức ảnh minh họa đầu bài. 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%

Để giá trị là % bạn không phải lo kích thước bức ảnh là bao nhiêu, dù lớn hay bé nó sẽ được bo cùng tỷ lệ, nếu để là px thì với bức ảnh lớn góc bo trông sẽ nhỏ hơn góc bo của bức ảnh bé...Cuối cùng đây là bức hình gốc khi chưa được bo tròn:

P/S: Bức ảnh chụp Admin và bạn gái :)

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ả:

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

Đ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%.