CÔNG TY THIẾT KẾ WEBSITE
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:
1 | 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.
1 | 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, …
1 | border-style: solid; |
Thuộc tính border-color xác định màu của đường viền.
1 | border-color: red; |
Thuộc tính vị trí của border :
1 2 3 4 5 6 7 8 9 10 11 | /* 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:
1 | 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.
1 2 | 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 |
| solid | Xác định đường viền cho thành phần là đường thẳng nét (solid). | border-style: solid |
| dashed | Xác định đường viền cho thành phần là gạch ngang (dashed). | border-style: dashed |
| double | Xác định đường viền cho thành phần là 2 đường thẳng nét (double). | border-style: double |
| groove | Xác định đường viền cho thành phần là đường rãnh (groove). | border-style: groove |
| ridge | Xác định đường viền cho thành phần là đường chóp (ridge). | border-style: ridge |
| inset | Xác định đường viền cho thành phần là đường bóng bên trong (inset). | border-style: inset |
| outset | Xác định đường viền cho thành phần là đường bóng bên ngoài (outset). | border-style: outset |
| inherit | Xá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
Bài viết liên quan
Top 10 Footer Đẹp Cho Website Giáo Dục
Chủ đề thiết kế website về giáo dục luôn là chủ đề hot cho các designer thiết kế website. Để thiết kế một footer đẹp các designer luôn mất nhiều thời gian sắp xếp ý tưởng lên phương án thiết kế nhưng thành...
Modernizr là gì ? Sử dụng nó cho những trình duyệt cũ ra sao?
Chắc chắn có rất nhiều bạn đọc được nhiều bài viết có xuất hiện Modernizr, và đều thắc mắc Modernizr là gì? Sử dụng nó cho những trình duyệt cũ ra sao?. Cùng tìm...
Top 5 công ty thiết kế website uy tín, chuyên nghiệp nhất tại Hà Nội
Website hiện đang là 1 trong những nền tảng và công cụ bán hàng, quảng bá thương hiệu lâu dài và tốt nhất tại Hà Nội. Nếu bạn đã hoặc đang có ý định...
Top 5 Công Ty Thiết Kế Website Tại Đà Nẵng Tốt Nhất
"Công ty thiết kế website chuyên nghiệp năm 2019 tại Đà Nẵng " là từ khóa mà nhiều đơn vị, công ty hay khách buôn bán lẻ tìm đến với nhu cầu mong muốn...
Khái niệm và các thông tin liên quan đến web 3.0
Khi mà người người nhà nhà đang sử dụng web 2.0 thì đột nhiên xuất hiện khái niệm khá mới mẻ “web 3.0”. Trên rất nhiều diễn đàn hiện nay đang tranh luận sôi...
5 Lợi ích vàng của thiết kế website chuyên nghiệp đối với doanh nghiệp
Thiết kế website chuyên nghiệp là hình thức quảng bá thương hiệu doanh nghiệp hiệu quả tốt nhất hiện nay với chi phí thấp nhất. Tất cả các doanh nghiệp có tên tuổi trên...
Để lại bình luận