Hiệu ứng bo tròn góc sử dụ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.

Code CSS như sau, các bạn có thể tùy biến theo ý mình:

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

Khi cần sử dụng hiệu ứng này, các bạn sử dụng thẻ <div> như sau:

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

Thay thế đoạn code màu đỏ ở trên (bo 4 cạnh) bằng đoạn code bên dưới nếu muốn bo tròn các góc riêng biệt:

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

Đoạn code này bo tròn góc trên bên trái, tương tự thay thế top -> bottom hoặc left -> right ở đoạn code màu xanh cho các góc khác.