Đường viền trong CSS | Border trong CSS PDF border trong css

http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     Đường viền CSS | Border CSS Thuộc tính border CSS giúp bạn xác định style, độ rộng màu đường viền bao quanh phần tử Tương ứng, bạn có ba thuộc tính sau giúp bạn thực việc này: • Thuộc tính border-color xác định màu đường viền • Thuộc tính border-style giúp bạn xác định xem đường viền nên solid, dashed, double, … • Thuộc tính border-width giúp bạn xác định độ rộng đường viền Phần tiếp theo, trình bày chi tiết thuộc tính giá trị thuộc tính CSS Thuộc tính border-color CSS Để xác định màu cho đường viền CSS, bạn sử dụng thuộc tính border-color Ngồi việc xác định màu cho tồn đường viền bao quanh phần tử, bạn xác định riêng rẽ màu cho phần đường viền, chẳng hạn phần trên, đáy, cạnh trái cạnh phải Tùy theo mục đích, bạn sử dụng thuộc tính sau • Thuộc tính border-bottom-color giúp bạn thay đổi màu đáy đường viền • Thuộc tính border-top-color giúp bạn thay đổi màu phần đường viền • Thuộc tính border-left-color giúp bạn thay đổi màu cạnh trái đường viền • Thuộc tính border-right-color giúp bạn thay đổi màu cạnh phải đường viền Các thuộc tính nhận giá trị màu hợp lệ (bạn tham khảo chương Màu CSS), Ví dụ sau minh họa cách sử dụng thuộc tính CSS p.example1{ border:1px solid; border-bottom-color:#009900; /* Green */ border-top-color:#FF0000; /* Red */ border-left-color:#330000; /* Black */ border-right-color:#0000CC; /* Blue */ } p.example2{ border:1px solid; border-color:#009900; /* Green */ }

Vi du hien thi Border voi cac mau khac tren cac canh

Vi du hien thi Border voi mau nhat tren tat ca cac canh

http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     Kết là: Thuộc tính border-style CSS Để xác định xem style đường viền solid, dotted, dashed, double, …, bạn sử dụng thuộc tính border-style CSS Thuộc tính nhận giá trị sau: • none • solid • dotted • dashed • double • groove • ridge • inset • outset • hidden Giống thuộc tính border-color, bạn xác định style riêng cho phần (trên, đáy, cạnh trái, cạnh phải) đường viền Các thuộc tính là: • Thuộc tính border-bottom-style thay đổi style cho cạnh đường viền • Thuộc tính border-top-style thay đổi style cho cạnh đường viền • Thuộc tính border-left-style thay đổi style cho cạnh trái đường viền • Thuộc tính border-right-style thay đổi style cho cạnh phải đường viền Dưới ví dụ minh họa cách sử dụng thuộc tính CSS

Vi du Border co dang la none

Vi du Border dang http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     solid

Vi du Border dang dahsed

Vi du Border dang double

Vi du Border dang groove

Vi du Border dang aridge

Vi du Border dang inset

Vi du Border dang outset

Vi du Border dang hidden

Vi du Border voi Style khac cho cac canh

Kết là: Thuộc tính border-width CSS Sử dụng thuộc tính border-width CSS giúp bạn thay đổi độ rộng đường viền bao quanh phần tử Thuộc tính nhận giá trị đo chiều dài với đơn vị px, pt cm thin, medium thick Để xác định độ rộng cho cạnh đường viền, bạn sử dụng thuộc tính sau: • Thuộc tính border-bottom-width thay đổi style cho cạnh đường viền • Thuộc tính border-top-width thay đổi style cho cạnh đường viền • Thuộc tính border-left-width thay đổi style cho cạnh trái đường viền • Thuộc tính border-right-width thay đổi style cho cạnh phải đường viền Sau ví dụ minh họa cách sử dụng thuộc tính CSS

Vi du Border dang solid co rong la 2px

Vi du Border dang solid co rong la 6pt

Vi du Border dang solid co rong la thin

Vi du Border dang solid co rong la medium

Vi du Border dang solid co rong la thick

Vi du Border dang solid co rong khac cho cac canh

http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     Kết là: Thuộc tính border CSS Sử dụng thuộc tính border CSS, bạn tối thiểu hóa lượng code cần viết mà xác định đầy đủ style cho đường viền Trong phần style rule xác định cho thuộc tính border, bạn bắt buộc phải xác định giá trị cho thuộc tính border-style Dưới ví dụ minh họa cho cách sử dụng thuộc tính border CSS:

Vi du xac dinh tat ca cac gia tri lien quan toi Border chi mot Style Rule

Kết là: Vi du xac dinh tat ca cac gia tri lien quan toi Border chi mot Style Rule   http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     ... border- top-style thay đổi style cho cạnh đường viền • Thuộc tính border- left-style thay đổi style cho cạnh trái đường viền • Thuộc tính border- right-style thay đổi style cho cạnh phải đường viền. .. style cho cạnh đường viền • Thuộc tính border- top-width thay đổi style cho cạnh đường viền • Thuộc tính border- left-width thay đổi style cho cạnh trái đường viền • Thuộc tính border- right-width... style= "border- width:4px; border- style:ridge"> Vi du Border dang aridge

Vi du Border dang inset