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

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. Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo hiệu ứng bo tròn góc với CSS.

1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
2. Tìm thẻ ]]></b:skin> và dán đoạn code này ngay trên nó :
   
   #round {
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   width:250px;
   background:#eeeeee;
   border-color:#DEDEDE;
   }
   .round-content {
   padding: 10px;
   }
3. Save lại template. Vậy là bạn đã thiết lập được hiệu ứng này.
4. Để 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>

Mở rộng bước 2

1/ 2 dòng code màu đỏ sẽ thiết lập mặc định bo tròn tất cả 4 góc (Xem ảnh dưới để thấy kết quả)

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;

2/ Với thông số màu lục, 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;).

3/ 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 !