CSS - Tạo border bo tròn, góc cong(How to create border radius).




Như ta đã biệt việc tạo một border cho một thẻ div luôn luôn vào một góc vuông đầy khía cạnh, tuy nó rất đẹp và chuẩn nhưng thị hiếu mỗi người khác nhau nên sẽ có những bạn sẽ thích các đường border tròn.

Bài viết này sẽ hướng dẫn cách tạo border góc cong(border radius) và một số tùy biến với việc tạo góc bo tròn cho thể div.





Như thường lệ ta chuẩn một số thao tác để thực hiện mô tả cho bài viết, đầu tiên ta tạo một trang html với nôi dung như sau:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VNLIVES.NET</title>
<style type="text/css">
<!--
#div_01 {
    height: 100px;
    width: 100px;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #2B8FFF;
}
-->
</style>
</head>

<body>

<div id='div_01'>VN-LIVES</div>

</body>
</html>

Sau khi mở trang html trên thì ta được kết quả như hình bên dưới.

Bây giờ ta sẽ thêm thuộc tính border radius vào để tạo góc bo tròn cho border.
#div_01 {
    height: 100px;
    width: 100px;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #2B8FFF;
    border-radius: 10px;
}

Sau khi chạy lại(refresh) trang web thì ta được kết quả như hình bên dưới.

Ngoài ra border-radius cũng giống như border cho phép ta thiết lập riêng từng thông số của từng vị trí(top, left, right, bottom).
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;

Và dựa vào thông số này ta có thể thực hiện một số tùy biến về góc cong border để cho ra kết quả như sau:

Dưới đây là toàn bộ source code để các bạn tham khảo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VNLIVES.NET</title>
<style type="text/css">
<!--
#div_01 {
    height: 100px;
    width: 100px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #2B8FFF;
    margin: 10px;
    padding: 10px;
    float: left;
}

#div_02 {
    height: 100px;
    width: 100px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #2B8FFF;
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
    float: left;
}

#div_03 {
    height: 100px;
    width: 100px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #2B8FFF;
    border-radius: 5px 20px 5px;
    margin: 10px;
    padding: 10px;
    float: left;
}

#div_04 {
    height: 100px;
    width: 100px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #2B8FFF;
    border-radius: 10px/70px;
    margin: 10px;
    padding: 10px;
    float: left;
}

#div_05 {
    height: 100px;
    width: 100px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #2B8FFF;
    border-radius: 50px/10px;
    margin: 10px;
    padding: 10px;
    float: left;
}

-->
</style>
</head>

<body>

<div id='div_01'>VN-LIVES</div>
<div id='div_02'>VN-LIVES</div>
<div id='div_03'>VN-LIVES</div>
<div id='div_04'>VN-LIVES</div>
<div id='div_05'>VN-LIVES</div>

</body>
</html>







Posted by at
Labels: , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)