Biên giới - Thủ thuật CSS

Các borderbất động sản là một cú pháp viết tắt trong CSS chấp nhận nhiều giá trị cho vẽ một đường xung quanh các yếu tố đó được áp dụng cho.

.box ( border: 3px solid red; height: 200px; width: 200px; )

Giá trị

Các borderbất động sản chấp nhận một hoặc nhiều giá trị sau trong kết hợp:

border: || || 

• border-width: Chỉ định độ dày của đường viền.
  • : Một giá trị số đo bằng px, em, rem, vhvà vwcác đơn vị.
  • thin: Tương đương với 1px
  • medium: Tương đương với 3px
  • thick: Tương đương với 5px
• border-style: Chỉ định loại đường được vẽ xung quanh phần tử, bao gồm:
  • solid: Một đường liền mạch, liên tục.
  • none (mặc định): Không có dòng nào được vẽ.
  • hidden: Một đường được vẽ, nhưng không nhìn thấy được. điều này có thể hữu ích để thêm một chút chiều rộng vào một phần tử mà không hiển thị đường viền.
  • dashed: Một dòng bao gồm các dấu gạch ngang.
  • dotted: Một dòng bao gồm các dấu chấm.
  • double: Hai đường được vẽ xung quanh phần tử.
  • groove: Thêm một góc xiên dựa trên giá trị màu theo cách làm cho phần tử xuất hiện được nhấn vào tài liệu.
  • ridge: Tương tự như groove, nhưng đảo ngược các giá trị màu theo cách làm cho phần tử có vẻ như được nâng lên.
  • inset: Thêm âm tách vào dòng khiến phần tử có vẻ hơi trầm.
  • outset: Tương tự như inset, nhưng đảo ngược màu sắc theo cách làm cho phần tử có vẻ hơi nổi lên.
• color: Chỉ định màu của đường viền và chấp nhận ,, , , , , currentcolor and

Phew, that’s a lot of values for one little ol’ property! Here’s a demo that illustrates the differences between all of those style values:

See the Pen CSS border by Geoff Graham (@geoffgraham) on CodePen.

Browser Support

You can count on excellent support for the border property across all browsers.

Trình duyệt Chrome	Safari	Firefox	Opera	I E	Android	iOS
Bất kì	Bất kì	Bất kì	3,5+	4+	Bất kì	Bất kì

Related Properties

What we covered here is specific to the border property, but there are other properties that provide even more options for styling borders.

• border-collapse: Specifies the spacing between borders on the
• border-image: Allows the use of an image to draw the border instead of a solid color.
• border-radius: Provides control for rounded corners.

More Information

• CSS Backgrounds and Borders Module Level 3 Specification
• Understanding border-image
• A Tale of Border Gradients

---




element. #####