Định nghĩa và sử dụng. Thuộc tính border trong css3 dùng để định dạng các dạng bo góc của border ngoài, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, border-radius.

Danh ngôn cuộc sống:

• Bài viết được đăng bởi: Mr. Phan Nhan
• Ngày cập nhật bài viết: 13/05/2016
• Tổng lược xem trang: 373 / 1 khách
• Đánh giá bởi người dùng:

Định nghĩa và sử dụng. Thuộc tính border trong css3 dùng để định dạng các dạng bo góc của border ngoài dạng đã được định nghĩa ở css2 (Xem thêm về border trong css2). Cấu trúc:

tag {
border: bề-dày kiểu mã-màu;
border-radius: giá trị;
-moz-border-radius: giá trị;
-webkit-border-radius: giá trị;
-ms-border-radius: giá trị;
-o-border-radius: giá trị;
}

Trong đó:
-moz-animation hỗ trợ cho firefox.
-webkit-animation hỗ trợ cho Google Chrome và Safari.
-ms-animation hỗ trợ cho Internet Explorer.
-o-animation hỗ trợ cho Opera.
HTML viết:

<html>
<head></head>
<body>
<p>border image</p>
</body>
</html>

Thuộc tính border-top-left-radius : Góc trên - bên trái sẽ được uốn cong. CSS viết:

p {
height: 50px;
border: 2px solid #cc0000;
-moz-border-top-left-radius: 10px 20px;
-webkit-border-top-left-radius: 10px 20px;
-ms-border-top-left-radius: 10px 20px;
-o-border-top-left-radius: 10px 20px;
border-top-left-radius: 10px 20px;
}

Thuộc tính border-top-right-radius : Góc trên - bên phải sẽ được uốn cong. CSS viết:

p {
height: 50px;
border: 2px solid #cc0000;
-moz-border-top-right-radius: 10px 20px;
-webkit-border-top-right-radius: 10px 20px;
-ms-border-top-right-radius: 10px 20px;
-o-border-top-right-radius: 10px 20px;
border-top-right-radius: 10px 20px;
}

Thuộc tính border-bottom-left-radius : Góc trên - bên trái sẽ được uốn cong. CSS viết:

p {
height: 50px;
border: 2px solid #cc0000;
-moz-border-bottom-left-radius: 10px 20px;
-webkit-border-bottom-left-radius: 10px 20px;
-ms-border-bottom-left-radius: 10px 20px;
-o-border-bottom-left-radius: 10px 20px;
border-bottom-left-radius: 10px 20px;
}

Thuộc tính border-bottom-right-radius : Góc trên - bên phải sẽ được uốn cong. CSS viết:

p {
height: 50px;
border: 2px solid #cc0000;
-moz-border-bottom-right-radius: 10px 20px;
-webkit-border-bottom-right-radius: 10px 20px;
-ms-border-bottom-right-radius: 10px 20px;
-o-border-bottom-right-radius: 10px 20px;
border-bottom-right-radius: 10px 20px;
}

Thuộc tính border-radius 2 giá trị: Cả 4 góc đều được uốn cong. 2 góc: [top-left] [bottom-right] có cùng giá trị. 2 góc [top-right] [bottom-left] có cùng giá trị. CSS viết:

p {
height: 50px;
border: 2px solid #cc0000;
-moz-border-radius: 20px 10px;
-webkit-border-radius: 20px 10px;
-ms-border-radius: 20px 10px;
-o-border-radius: 20px 10px;
border-radius: 20px 10px;
}

Thuộc tính border-radius 4 giá trị: Cả 4 góc đều được uốn cong. Cả 4 góc: [top-left] [top-right] [bottom-left] [bottom-right] đều có giá trị khác nhau. CSS viết:

p {
height: 50px;
border: 2px solid #cc0000;
-moz-border-radius: 20px 10px 30px 40px;
-webkit-border-radius: 20px 10px 30px 40px;
-ms-border-radius: 20px 10px 30px 40px;
-o-border-radius: 20px 10px 30px 40px;
border-radius: 20px 10px 30px 40px;
}

Những bài viết được đăng mới nhất.

» Công cụ xóa dấu Tiếng việt