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.
#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 :
Nội dung
-2 dòng màu đỏ 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;
