Cách sử dụng Border trong CSS

Over 6 working discount & coupon codes is active for 61 users, enjoy!

Cách sử dụng Border trong CSS

Border : là một thuộc tính khá quan trọng. Khi thuộc tính Border được khai báo cho phép chúng có thể quy định độ dày, màu sắc và kiểu hiện thị đường viền của một thành phần nào đó, tạo ra sự phân biệt giữa các thành phần với nhau trong trang web được rõ ràng hơn.

Các giá trị của border bao gồm: border-style, border-width và border-color.
Để đường viền được hiện thị thì giá trị border-style luôn phải được khai báo.

Border style: Border-style sẽ quy định kiểu dáng hiển thị của đường viền, những ví dụ bên dưới cho thấy kiểu dáng hiện thị tương ứng của chúng. Có các  kiểu định dạng sau: solid, dashed, dotted, double, groove, ridge, inset, outset..

Border Width: Border-width sẽ quy định độ dày của đường viền.Các giá trị của border-width được tính bằng px, hay có thể sử dụng 1 trong 3 giá trị: thin, medium, thick.

Border Color: Border-color sẽ quy định màu sắc của đường viền được hiển thị. Giá trị màu có thể là:

  • Tên màu (tên tiếng anh): red, white, black . . .
  • Hệ RGB – ví dụ: rgb(255,155,0)
  • Hệ Hex – ví dụ: #ff0000

Ngoài ra border-color còn có giá trị  ”transparent” (trong suốt). Tuy nhiên thì giá trị này không mấy khi được dùng tới. Bởi vì mục đích của chúng ta là muốn đường viền được hiển thị

Ví dụ: Dùng cách sử dụng Border trong CSS để định dang border sau:

–         Trong file: bai 1html.html ta có:

–         Trong file: style.css ta gõ:

-          Kết quả:

border

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

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

No Comments

Leave Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">


*