CSS Borders

Trong CSS, borders được dùng để tạo đường viền hiển thị xung quanh một phần tử. Chúng có thể được tùy chỉnh theo các thuộc tính sau:

Width: Độ dày của đường viền.
Style: Hình dạng của đường viền (ví dụ: liền nét, đứt nét, chấm bi...).
Color: Màu sắc của đường viền.

Bạn có thể thử các loại đường viền khác nhau ở đây:

Syntax:

element {
    border: 1px solid black;
}

Ở đây, border được định nghĩa là rộng 1 pixel, kiểu solid, và màu đen.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .simple-border {
            border: 2px solid black;
            padding: 20px;
            text-align: center;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="simple-border">This div has a simple black border.</div>
</body>
</html>

<!--Driver Code Ends-->

Đoạn code này tạo một phần tử div có đường viền đen đơn giản rộng 2px. Nội dung bên trong div có padding 20px tạo khoảng cách. Khoảng cách này nằm giữa đường viền và chữ. Chữ được căn giữa bằng text-align: center.

CSS Border Properties

CSS cung cấp nhiều thuộc tính để điều khiển và tùy chỉnh đường viền.

Property	Description
`border-style`	Xác định kiểu của đường viền (ví dụ: solid, dashed, dotted).
`border-width`	Thiết lập độ rộng của đường viền (tính bằng pixel, point hoặc đơn vị khác).
`border-color`	Chỉ định màu sắc của đường viền.
`border-radius`	Tạo các góc bo tròn cho phần tử.

Ways to Style Border in CSS

Thuộc tính CSS border property cho phép tạo kiểu cho đường viền của phần tử. Việc này được thực hiện bằng cách đặt chiều rộng, kiểu và màu sắc. Nó cho phép tạo các đường viền tùy chỉnh trong thiết kế web.

. Border Style

. Border Width

. Border Color

. Border individual sides

CSS cho phép bạn tạo kiểu cho từng cạnh của đường viền riêng biệt. Nó mang lại sự linh hoạt cao trong thiết kế.

. Border Radius Property

Thuộc tính border-radius cho phép bạn bo tròn các góc của một phần tử. Nó giúp tạo ra các cạnh mượt mà hơn.

Common Border Styles

Thuộc tính border-style chỉ định kiểu đường viền. Các thuộc tính border khác sẽ không hoạt động nếu không có border-style.

Border Style	Description
Dotted	Tạo một loạt các dấu chấm.
Dashed	Tạo một đường đứt nét.
Solid	Tạo một đường liền nét.
Double	Tạo hai đường song song.
Groove	Tạo hiệu ứng rãnh 3D.
Ridge	Tạo hiệu ứng gờ 3D.
Inset	Thêm đường viền 3D thụt vào.
Outset	Thêm đường viền 3D lồi ra.
None	Loại bỏ đường viền.
Hidden	Ẩn đường viền.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        p.dotted {
            border-style: dotted;
        }
        p.dashed {
            border-style: dashed;
        }
        p.solid {
            border-style: solid;
        }
        p.double {
            border-style: double;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <p class="dotted">A dotted border.</p>
    <p class="dashed">A dashed border.</p>
    <p class="solid">A solid border.</p>
    <p class="double">A double border.</p>
</body>
</html>
<!--Driver Code Ends-->

Trong ví dụ này:

border-style được dùng để thiết lập kiểu đường viền xung quanh một phần tử.
dotted: Tạo đường viền bằng các dấu chấm.
dashed: Tạo đường viền bằng các đường nét đứt.
solid: Tạo đường viền liền nét.
double: Tạo đường viền với hai đường liền nét.

CSS Border Width

CSS border-width được dùng để xác định độ dày của đường viền xung quanh phần tử. Nó có thể được chỉ định bằng nhiều đơn vị như px, pt, cm. Hoặc bạn có thể dùng các giá trị định sẵn như thin, medium và thick.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        p {
            border-style: solid;
            border-width: 8px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <p>CSS Border Width</p>
</body>
</html>
<!--Driver Code Ends-->

Trong ví dụ này:

Thuộc tính border-width được dùng để thiết lập độ dày của đường viền.
Bạn có thể dùng giá trị số (ví dụ: 1px, 5pt, 2cm) hoặc từ khóa (thin, medium, thick). Từ khóa được dùng để đặt độ rộng đường viền.
Các thuộc tính border-style và border-color phải được dùng cùng với border-width. Chúng được dùng để thấy hiệu ứng của nó.

CSS Border Color

CSS border-color được dùng để xác định màu của đường viền. Bạn có thể thiết lập màu bằng tên màu, giá trị hex hoặc giá trị RGB. Nếu không có màu nào được chỉ định, đường viền sẽ kế thừa màu của chính phần tử.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        p {
            border-style: solid;
            border-color: red
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <p>CSS Border color</p>
</body>
</html>
<!--Driver Code Ends-->

Trong ví dụ này:

Thuộc tính border-color được dùng để thiết lập màu cho đường viền của phần tử.
Màu đường viền được đặt thành màu đỏ bằng tên màu red. Bạn có thể dùng mã hex như #ff0000 hoặc giá trị RGB như rgb(255, 0, 0).
Thuộc tính border-style phải được xác định (ví dụ: solid, dashed,...). Điều này giúp cho màu đường viền hiển thị.

Border radius property

CSSborder-radius property trong CSS dùng để bo tròn các góc đường viền. Nó giúp cho giao diện trở nên mượt mà và bắt mắt hơn.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        h1 {
            border-style: solid;
            text-align: center;
            background: green;
            border-radius: 20px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h1>Border Radius Property</h1>
</body>
</html>

<!--Driver Code Ends-->

Trong ví dụ này:

border-radius được dùng để áp dụng góc tròn cho phần tử. Trong trường hợp này, giá trị 20px được áp dụng để tạo cạnh tròn mềm mại.
Phần tử này có đường viền liền nét, nền màu xanh lá cây và chữ căn giữa. Góc tròn được bo giúp tăng tính thẩm mỹ.
Bạn có thể điều chỉnh giá trị border-radius để kiểm soát độ cong của góc. Góc có thể được làm tròn nhiều hay ít tùy ý.

Practical Use Cases of CSS Borders

Đường viền CSS thường được dùng trong các trường hợp sau:

Styling Buttons : Đường viền làm nổi bật thiết kế nút, giúp chúng bắt mắt và dễ nhấp hơn.
Creating Dividers : Đường viền có thể đóng vai trò là vạch ngăn cách giữa các phần nội dung. Nó giúp cung cấp các phân tách trực quan rõ ràng.
Customizing Images : Áp dụng đường viền xung quanh hình ảnh để đóng khung chúng. Nó giúp hình thu nhỏ nổi bật hơn.
Designing Navigation Menus : Đường viền có thể xác định ranh giới của các liên kết hoặc mục điều hướng.

CSS Borders

CSS Border Properties

Ways to Style Border in CSS

. Border Style

. Border Width

. Border Color

. Border individual sides

. Border Radius Property

Common Border Styles

CSS Border Width

Trong ví dụ này:

CSS Border Color

Trong ví dụ này:

Border radius property

Trong ví dụ này:

Practical Use Cases of CSS Borders

CSS Margins

CSS Outline

CSS Text Formatting

CSS Positioning Elements

CSS Background

CSS | Centering Elements

CSS DropDowns

CSS Combinators

CSS