CÔNG TY THIẾT KẾ WEBSITE

Kho giao diện mẫu phong phú đa dạng các ngành nghề kinh doanh

Kinh doanh hiệu quả hơn trên internet

Border trong css

Border trong css


Notice: A non well formed numeric value encountered in /home/vn4uit/domains/vn4u.vn/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/vn4uit/domains/vn4u.vn/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/vn4uit/domains/vn4u.vn/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/vn4uit/domains/vn4u.vn/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/vn4uit/domains/vn4u.vn/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/vn4uit/domains/vn4u.vn/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/vn4uit/domains/vn4u.vn/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/vn4uit/domains/vn4u.vn/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/vn4uit/domains/vn4u.vn/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/vn4uit/domains/vn4u.vn/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/vn4uit/domains/vn4u.vn/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/vn4uit/domains/vn4u.vn/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/vn4uit/domains/vn4u.vn/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/vn4uit/domains/vn4u.vn/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

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:

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.

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

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

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

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:

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

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

 

091 406 1648

Để lại bình luận

avatar
  Theo dõi  
Notify of
Gọi ngay 0984510136
Chat với chúng tôi qua zalo