Thiết lập viền thành phần với thuộc tính border trong CSS3

Viền (border) là một phần không thể thiếu trong mỗi website một trang web có trở lên đẹp hơn hay không thì một phần cũng nhờ những đường viền đó. Nhưng do trong series học CSS mình chưa giới thiệu với mọi người các thuộc tính tác động đến border, nên bài này mình sẽ giới thiệu hết với mọi người các thuộc tính tác động đến viền của thành phần và thuộc tính đó là CSS mấy.

1, Thuộc tính border (CSS1).

Thuộc tính chung

-Thuộc tính border trong CSS có tác dụng thiết lập đường viền cho thành phần.

Cú Pháp:

border: border-width border-style border-color;

Trong đó:

border-width - Là chiều rộng của đường viền mà các bạn muốn thêm.
border-style - Là kiểu của đường viền, nó bao gồm các giá trị sau:
- none - là không xác định.
- dotted - là nét đứt.
- dashed - là nét -.
- solid - là nét liền.
- double - là nét liền kép.
- groove.
- ridge.
- inset.
- outset
- hidden
border-color - Là các mã màu hoặc tên màu trong tiếng anh hoặc initial hoặc inherit.

VD:

.border{
    border: 4px solid orange;
}

Xem Kết Quả

Các Thành phần riêng lẻ.

-Nếu như trong trường hợp các bạn muốn xét riêng từng thành phần thay vì gộp 1 dùng như trên thì các bạn có thể sử dụng các thuộc tính sau:

border-width - Thiết lập chiều dày của đường viền.
border-style - Thiết lập kiểu của đường viền.
border-color - Thiết lập màu sắc cho đường viền.

VD:

.border{
    border-width: 5px;
    border-style: dotted;
    border-color: orange;
}

Xem Kết Quả

Thiết lập border cho từng cạnh

-Cũng tương tự như các ví dụ trên, các bạn chỉ việc thêm các tham số cạnh để được thiết lập cho từng phía của thành phần. Các phía này bao gồm:

top - Trên.
bottom - Dưới.
right - Phải.
left - Trái.

VD: CSS border top cho thành phần

.border{
    border-top: 5px dashed orange;
}

Xem Kết Quả

VD: CSS border top cho thành phần theo các thành phần riêng lẻ.

.border{
    border-top-width: 5px;
    border-top-style: dashed;
    border-top-color: orange;
}

Xem Kết Quả

2, Các thuộc tính tạo viền là ảnh cho thành phần (CSS3)

Thuộc tính border-image-source

-Thuộc tính border-image-source trong CSS3 có tác dụng thiết lập địa chỉ chứa hình ảnh làm border.

Cú pháp:

border-image-source: url(path);

Trong đó: path là địa chỉ của hình ảnh.

VD: Xác định viền hình ảnh cho thành phần.

.border{
    border:15px solid transparent;
    border-image-source: url(border.png);
}

Xem Kết Quả

Thuộc tính border-slice

-Thuộc tính border-slice trong CSS3 có tác dụng thiết lập phần cắt image với các cạnh của border.

Cú pháp:

border-image-slice: value;

Trong đó: value này có thể là một, hai, ba, bốn giá trị với vị trí giống như thuộc tính margin padding.

VD:

.border{
    border:35px solid transparent;
    border-image-source: url(border.png);
    height: 300px;
    border-image-slice: 170;
}
.border2{
    border:35px solid transparent;
    border-image-source: url(border.png);
    height: 300px;
    border-image-slice: 20%;
}

Xem Kết Quả

Thuộc tính border-image-width

-Thuộc tính border-image-width trong CSS3 có tác dụng xác định chiều rộng của border-image.

Cú pháp:

border-image-width: value;

Trong đó: value là các giá trị đo độ dài.

VD:

.border{
    border:35px solid transparent;
    border-image-source: url(border.png);
    height: 300px;
    border-image-slice: 170;
    border-image-width: 15px;
}
.border2{
    border:35px solid transparent;
    border-image-source: url(border.png);
    height: 300px;
    border-image-slice: 20%;
    border-image-width: 25px;
}

Xem Kết Quả

Thuộc tính border-repeat

-Thuộc tính border-repeat trong CSS3 có tác dụng xác định xem đường viền được lặp lại theo kiểu nào hoặc làm tròn hoặc kéo dãn.

Cú pháp:

border-image-repeat: value;

Trong đó: value là một trong các giá trị

stretch - kéo dãn (đây là giá trị mặc định).
repeat - lặp lại.
round - làm tròn.
initial - xét lại giá trị mặc định.

VD:

.border{
    border:35px solid transparent;
    border-image-source: url(border.png);
    height: 300px;
    border-image-slice: 170;
    border-image-width: 15px;
    border-image-repeat: stretch;
}
.border2{
    border:35px solid transparent;
    border-image-source: url(border.png);
    height: 300px;
    border-image-slice: 20%;
    border-image-width: 25px;
    border-image-repeat: round;
}
.border3{
    border:35px solid transparent;
    border-image-source: url(border.png);
    height: 300px;
    border-image-slice: 20%;
    border-image-width: 25px;
    border-image-repeat: repeat;
}

Xem Kết Quả

Thuộc tính border-image-outset

-Thuộc tính border-imgae-outset trong CSS3 có tác dụng xác định chiều rộng viền đổ ra phía bên ngoài thành phần.

Cú pháp:

border-imgae-outsert: value;

Trong đó: value có thể là một, hai, ba, bốn giá trị với vị trí ảnh hưởng tương tự như thuộc tính margin padding.

VD:

.border{
        border:35px solid transparent;
        border-image-source: url(border.png);
        height: 300px;
        border-image-slice: 170;
        border-image-width: 15px;
        border-image-repeat: stretch;
        border-image-outset: 10px;
    }
    .border2{
        border:35px solid transparent;
        border-image-source: url(border.png);
        height: 300px;
        border-image-slice: 20%;
        border-image-width: 25px;
        border-image-repeat: round;
        border-image-outset: 10px 15px;
    }
    .border3{
        border:35px solid transparent;
        border-image-source: url(border.png);
        height: 300px;
        border-image-slice: 20%;
        border-image-width: 25px;
        border-image-repeat: repeat;
        border-image-outset: 15px 20px 35px 30px;
    }

Xem Kết Quả

Thuộc tính gộp - border-image.

-Thuộc tính border-image trong CSS3 là thuộc tính gộp tất cả các thuộc tính mình giới thiệu ở phía trên về cùng 1 dòng.

Cú pháp:

border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat;

VD:

border-image: url(border.png) 30 10 10 round;

Xem Kết Quả

3, Xác định độ bo mịn với thuộc tính border-radius (CSS3).

-Thuộc tính border-radius trong CSS3 có tác dụng làm mịn độ bo viền của các thành phần.

Cú pháp:

border-radius: value;

Trong đó: value này cũng có thể là một, hai, ba, bốn giá trị với vị trí ảnh hưởng tương tự như thuộc tính margin padding.

VD:

[class*=border-radius]{
    width: 300px;
    height: 300px;
    border: 4px solid orange;
    margin-top: 15px;
}
.border-radius1{
    border-radius: 10px;
}
.border-radius2{
    border-radius: 10px 25px;
}
.border-radius3{
    border-radius: 10px 25px 40px;
}
.border-radius4{
    border-radius: 5px 20px 25px 40px;
}

Xem Kết Quả

-Và cũng tương tự như thuộc tính border thì border radius chúng ta cũng có các thuộc tính riêng cho từng cạnh.

border-top-left-radius - cạnh trên bên trái.
border-top-right-radius - cạnh trên bên phải.
border-bottom-right-radius - cạnh dưới bên phải.
border-bottom-left-radius - cạnh dưới bên trái.

VD:

[class*=border-radius]{
    width: 300px;
    height: 300px;
    border: 4px solid orange;
    margin-top: 15px;
}
.border-radius1{
    border-top-left-radius:10px;
}
.border-radius2{
    border-top-right-radius:25px;
}
.border-radius3{
    border-bottom-right-radius:40px;
}
.border-radius4{
    border-bottom-left-radius:40px;
}

Xem Kết Quả