Tạo hiệu ứng bo tròn góc bằng CSS

class="round-content"> CSS là một trong những ngôn ngữ lập trình rất được ưa chuộng vì sự đơn giản, gọn nhẹ, dễ sử dụng và tương thích với nhiều nền tảng web khác nhau. Nếu bạn viết blog hay xây dựng 1 trang web chắc chắn bạn muốn blog của mình trở nên đẹp hơn , nếu chỉ dùng những khối vuông blog trở nên đơn điệu , CSS có thể giúp bạn bo tròn góc bằng code rất đơn giản sau đây :


#round {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width:250px;
background:#eeeeee;
border-color:#DEDEDE;
}
.round-content {
padding: 10px;
}

Vậy là bạn đã thiết lập được hiệu ứng này.
Để sử dụng hiệu ứng bo tròn, bạn dùng cú pháp sau :

<div id="round" class="round-content">
Nội dung
</div>

2 dòng code màu vàng sẽ thiết lập mặc định bo tròn tất cả 4 góc
Nếu bạn chỉ muốn bo tròn từng góc riêng biệt, hãy thay thế nó bằng các cặp code dưới đây :

Bo tròn góc trái bên trên.

-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;

Bo tròn góc phải bên trên.

-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;

Bo tròn góc trái bên dưới.

-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;

Bo tròn góc phải bên dưới.

-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;

Với thông số màu hồng, nó sẽ thiết lập chiều rộng của khung được bo tròn. Bạn chỉ việc chỉnh lại sao cho vừa với kích thước của Blog (VD: 100px, 200px ...) hoặc để chế độ tự động canh (width:auto;).

Bạn có thể tạo nhiều lần đoạn mã ở bước 2 (cần đặt thêm số thứ tự round1, round2 ... để không trùng nhau) với nội dung tùy chỉnh nếu muốn. Và khi sử dụng, hãy nhớ đổi tên id trong cú pháp nhé!

Vậy là xong rồi đấy. Hy vọng chút thủ thuật nhỏ này sẽ giúp bạn làm đẹp thêm cho Blog của mình. Thân !