Thuộc tính Border-radius trong CSS

Để trang trí trang web bạn sẽ phải sử dụng rất nhiều thuộc tính khác nhau. Trong đó border-radius trong CSS là một trong những thuộc tính thường được mọi người sử dụng.

border-radius

Thuộc tính Border-radius trong CSS là gì?

Với border-radius bạn sẽ sử dụng để bo góc hay làm cong các góc phần tử HTML để trang trí giao diện đẹp mắt dễ nhìn hơn.

Để sử dụng border radius bạn sẽ viết như sau:

border-radius: value1 value2 value3 value4;

value1: độ cong của top-left;

value2: độ cong của top-right;

value3: độ cong của bottom-right;

value4: độ cong của bottom-left;

Ví dụ bạn chạy đoạn code này:

<!DOCTYPE html>
<html>
<head>
<title> Ví dụ về border radius trong css </title>
<style type="text/css">
.bogoc{
width:400px;
height:200px;
background-color:blue;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="bogoc"></div>
</body>
</html>

Kết quả là:

border-radius-trong-css

Các cách viết thuộc tính border-radius:

border-radius: 10px; bo đều 4 góc

border-radius: 10px 30px;

bo góc top-left và bottom-right là 10px

bo góc top-right và bottom-left là 30px;

border-radius-trong-css-1

border-radius: 10px 30px 50px 80px;

bo góc top-left là 10px;

bo góc top-right là 30px;

bo góc bottom-right là 50px;

bo góc bottom-left là 80px;

border-radius-trong-css-2

Để bo tròn 4 góc bạn viết như sau:

.bogoc{
width:200px;
height:200px;
background-color:blue;
border-radius: 200px;
}

border-radius-trong-css-3

Trường hợp bo 1 góc:

border-top-left-radius: 20px;

border-radius-trong-css-4

border-top-right-radius: 20px;

border-bottom-left-radius: 20px;

border-bottom-right-radius: 20px;

Bo góc kiểu thêm 2 giá trị:

border-top-left-radius: 50px 200px;

50px là giá trị bo góc top;

200px là giá trị bo góc left;

border-radius-trong-css-5

Border-radius trong CSS3

Để border-radius hoạt động tốt trên trình duyệt Chrome, Firefox, Safary thì bạn sẽ phải viết thêm:

border-radius: 10px;
-moz-border-radius: 10px; /*Firefox*/
-webkit-border-radius: 10px;/*Chrome và Safary*/

Kết luận: Qua ví dụ về Border radius CSS trên đây mang đến cho bạn kiến thức bổ ích về ngôn ngữ CSS rồi phải không nào. Hãy bắt tay vào thực hành ngày để xem kết quả như thế nào nhé!

Related Posts

Hover-CSS-1

Hiệu ứng rê chuột trong CSS

CSS là ngôn ngữ trang trí với nhiều hiệu ứng hay. Bạn sẽ thường gặp nhất là khi di chuyển chuột vào một liên kết (Link) hay…

Mẫu Form đăng nhập HTML và CSS đẹp mắt

Trong một số bài viết trên blog này mình đã chia sẻ về cách tạo một Form đăng nhập đơn giản. Nhưng để có một Form đẹp…

form-lien-he-4

Hướng dẫn tạo form liên hệ bằng HTML, CSS

Form liên hệ là một chức năng không thể thiếu cho blog, website. Thông qua Form độc giả, khách hàng có thể yêu cầu admin trợ giúp…

css-code-1

8 Cách viết CSS chuẩn, dễ đọc và tối ưu

Nói tới xây dựng giao diện phía Front-end không thể thiếu CSS. Ngôn ngữ được sử dụng phổ biến để sắp xếp bố cục các phần tử…

Thuộc tính text-shadow trong CSS

Trong những lúc rảnh rỗi mình thường hay nghịch ngợm một vài thứ hay ho tìm thấy trên internet. Đối với CSS thì text-shadow cũng là thuộc…

Thuộc tính Overflow trong CSS

Khi thiết kế web với HTML và CSS đôi khi chúng ta sẽ gặp phải tình trạng văn bản (text) bị tràn ra khỏi phần tử HTML…