Border Trong Css - Công Ty Thiết Kế Website Chuyên Nghiệp - VN4U

Trang chủ » Border Css Học Web Chuẩn » Border Trong Css - Công Ty Thiết Kế Website Chuyên Nghiệp - VN4U

Có thể bạn quan tâm

Thuộc tính border trong css giúp các bạn định dạng độ rộng , kiểu đường viền, màu sắc cho một phần tử.

Thông thường chúng ta sẽ viết như thế này khi tạo đường viền cho một đối tượng:

border: 1px solid red;

Demo: border : 1px solid red

Chú thích:

1px        : Độ rộng cho đường viền.

solid      : Kiểu đường viền

red        : Màu của đường viền (Có thể thay bằng mã màu #….)

Ngoài ra các bạn có thể tùy chỉnh riêng từng thuộc tính định dạng của border như sau:

Thuộc tính border-width giúp bạn xác định độ rộng cả đường viền.

border-width: 1px;

Thuộc tính border-style giúp bạn xác định xem đường viền nên là solid, dashed, double, …

border-style: solid;

Thuộc tính border-color xác định màu của đường viền.

border-color: red;

Thuộc tính vị trí của border :

/* Style đường viền bên trên */ border-top: 1px solid red; /* Style đường viền bên dưới*/ border-bottom: 1px solid red; /* Style đường viền bên trái*/ border-left: 1px solid red; /* Style đường viền bên phải*/ border-right: 1px solid red;

Cũng như bạn muốn thay đổi cả thuộc tính vị trí và thuộc tính định dạng thì như sau:

border-top-color: #ffffff; /* Đổi màu của đường viền trên */

Tương tự như trên nếu muốn thay đổi độ rộng : width, định dạng: style.

border-top-style : dashed; border-top-width : 2px;

Công ty thiết kế website tại hà nội

Các kiểu hiển thị của dạng style trong border:

 none.Xác định thành phần sẽ không có đường viền. border-style: none
hidden.Giống như giá trị none, nhưng được dùng cho table.border-style: hidden
 dotted.Xác định đường viền cho thành phần là dấu chấm (dotted).border-style: dotted
 solidXác định đường viền cho thành phần là đường thẳng nét (solid).border-style: solid
dashedXác định đường viền cho thành phần là gạch ngang (dashed).border-style: dashed
doubleXác định đường viền cho thành phần là 2 đường thẳng nét (double).border-style: double
grooveXác định đường viền cho thành phần là đường rãnh (groove).border-style: groove
ridgeXác định đường viền cho thành phần là đường chóp (ridge).border-style: ridge
 insetXác định đường viền cho thành phần là đường bóng bên trong (inset).border-style: inset
outsetXác định đường viền cho thành phần là đường bóng bên ngoài (outset).border-style: outset
inheritXác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).border-style: inherit

Hiện nay thuộc tính border còn được cải tiến thêm nhiều ở trong css3. Nổi bật là border-radius. Ở bài sau mình sẽ giới thiệu về nó.

Chúc các bạn thành công !

Công ty thiết kế website tại hà nội

Từ khóa » Border Css Học Web Chuẩn