Đường Viền Border Trong CSS

Trang chủ

• PHP
• Liên hệ

• HTML
• CSS
• JavaScript
• PHP
• Server
• Java
• Tri thức
• SQL

• Liên hệ

Cascading Style Sheets (CSS) LÀM QUEN VỚI CSS - ĐỊNH DẠNG TEXT § 1 Khái quát về CSS § 2 Cú pháp viết CSS § 3 Selector CSS § 4 color - Màu chữ § 5 font-family - Font chữ § 6 font-(size, weight, style) - Cỡ chữ, kiểu chữ § 7 text-transform - Chữ in hoa, in thường § 8 text-shadow - Đổ bóng chữ § 9 text-decoration - Gạch chân, kẻ ngang § 10 text-align - Căn lề § 11 line-height - Giãn dòng § 12 letter-spacing / word-spacing - Khoảng cách chữ § 13 white-space - Khoảng trắng § 14 Kiểu danh sách (list) § 15 Định dạng liên kết link § 16 Đơn vị dài CSS (CSS) BỐ CỤC VỚI CSS § 17 Mô hình box css § 18 padding - Khoảng padding § 19 border - Đường viền § 20 Bo góc § 21 margin - Khoảng margin § 22 width, height - Rộng và cao § 23 Thuộc tính display § 24 Thuộc tính visibility § 25 Màu nền, ảnh nền § 26 Thiết lập nền § 27 background - Tô nền phần tử § 28 Thuộc tính overflow § 29 Thuộc tính text-overflow § 30 Thuộc tính float § 31 Thuộc tính clear § 32 Thuộc tính position § 33 left, top, bottom, right § 34 Thuộc tính z-index § 35 Định dạng bảng (CSS) CSS NÂNG CAO § 36 Thiết lập con trỏ chuột § 37 CSS3 - Giới thiệu § 38 CSS3 - Bóng đổ § 39 CSS3 - Màu trong suốt § 40 Chọn theo pseudo-class § 41 Chọn theo pseudo-element § 42 CSS3 - word-wrap § 43 CSS3 - linear gradient § 44 CSS3 - radial gradient § 45 CSS3 - thiết lập trong suốt § 46 Hệu ứng chuyển đổi § 47 Hệu ứng biến hình § 48 Hiệu ứng chuyển động § 49 Thuộc tính filter § 50 Quy tắc @font-face § 51 FlexBox § 52 Grid § 53 @media CHỦ ĐỀ KHÁC § 54 BOOTSTRAP CSS FRAMEWORK § 55 SASS / SCSS § 56 GRUNT biên dịch SASS

• Lập trình PHP
  • PSR
  • Laminas
  • SPL
  • Xenforo
  • Zend Framework
• Lập trình ứng dụng iOS - Swift
• Ruby
  • Sketchup
• Lập trình Dart - Flutter
• Lập trình C# (C Sharp)
  • Lập trình C# Cơ bản
• Server
  • MySql Server
  • Windows
  • Apache
  • PHP
• HTML
• Javascript
  • JQuery
  • TypeScript - Angular
• CSS
  • Sử dụng SASS / SCSS
  • Bootstrap - CSS Framework
• SQL
  • SQL Server ( .NET Framework - C#)
  • MS Access
• Java
  • Android Java
• Thuật ngữ - Các vấn đề cơ bản
• Tools
  • Git và GitHub
  • Kubernetes
  • Mathematica
  • SSH - Secure Shell
  • Grunt
  • Elasticsearch
  • Docker
  • macOS
  • English Study
• Tin tức công nghệ
• Tri thức & Khoa học
  • Yoga

• CSS

padding - Khoảng padding (Bài trước) (Bài tiếp) Bo góc Đường viền border trong CSS

Sử dụng các thuộc tính về đường viền border như kiểu đường viền border-style, màu đường border-color và độ rộng border-width, công cụ phát sinh CSS về border trong html css tạo khung viền

• Công cụ phát sinh CSS Border
• Thuộc tính css border
• border-width, border-color, border-style
• border-top (bottom, left, right)

Có thể sử dụng các thuộc tính CSS về border để tạo ra các đường khung viền cho phần tử HTML, công cụ này giúp bạn phát sinh mã CSS Border nhanh với các tùy chọn như màu border, kiểu đường, kể cả tùy chọn các cạnh kẻ viền. Để hiểu về cú pháp bạn đọc phần dưới.

PHÁT SINH CSS KẺ VIỀN PHẦN TỬ HTML ⇢ Chọn cỡ đường kẻ (1px) ⇢ Chọn màu viền #b1154a ⇢ Kiểu đường viền none hidden dashed double ridge outset ⇢ Chọn cạnh kẻ viền tất cả cạnh trái cạnh phải cạnh trên cạnh dưới

Nếu muốn bo tron các góc của phần tử hãy tham khảo CSS bo tròn góc với css :border-radius

Kết quả

Mã thuộc tính CSS phát sinh

border: 1px solid #b1154a;

Copy mã này cho vào phần tử (như css: class, id ..., phần tử html div, p, ...) muốn áp dụng

Phần dưới đây là kiến thức lý thuyết về CSS border (đường viền)

Đường viền border CSS

Để thêm đường viền cho phần tử HTML bạn sử dụng thuộc tính CSS có tên border, giá trị cho thuộc tính này bạn viết trên một dòng thể hiện tính chất đường viền mong muốn, gồm ba giá trị là size style color, cú pháp là:

border: size style color;
• size : độ dày đường viền (như 1px, 2em ...)
• style : kiểu đường viền, nó nhận các giá trị như none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, hay dùng kiểu dotted - đường nét chấm chấm, dashed đường nét đứt, solid đường nét liền
• color : mã màu của đường viền (xem mã màu trong HTML, CSS) hay tên các màu sắc như red, blue, green, black, white, yellow ...

Như mã CSS tạo ra đường độ dày 2px, kiểu đường liền solid, màu đường là đỏ red, thì bạn viết:

border: 2px solid red;

Ví dụ tạo lớp CSS có tên boderexam1 nó kẻ viền phần từ, độ dày đường 5px, đường có kiểu nét đứt (gạch gạch), màu xanh lá (green)

<style> .boderexam1 { border: 5px dashed green; } </style> <p class="boderexam1">Ví dụ về đường viền</p>

Kết quả:

Ví dụ về đường viền

Trong cú pháp tạo đường viền

border: size style color;

Bạn có thể khai báo thiếu các thành phần, lúc này nó sẽ sử dụng giá trị mặc định, ví dụ vài trường hợp sau:

Mã CSS đường viền	Kết quả
border: node;	Thiết lập sẽ không kẻ viền
border: dashed #b1154a;	Thiếu size, do vậy size lấy mặc định
border: 1px dotted;	Thiếu màu, do vậy lấy màu mặc định

border-width, border-color, border-style

Ngoài cách viết đường viền theo thuộc tính border như trên, còn có thể sử dụng ba thuộc tính border-width, border-style, border-color để chỉ ra độ rộng, kiểu đường và màu sắc.

Độ rộng đường là giá trị theo đơn vị px, em ...

Màu sắc là các màu theo quy tắc CSS như màu theo tên, màu hash, màu RGB, rgba

Kiểu đường nhận các giá trị: none, dotted, dashed, double, groove, ridge, inset, outset, hidden

Ví dụ:

<style> p.none {border-style: none;} p.dotted { border-style: dotted; border-color: orangered; } p.dashed { border-width: 5px; border-color: green; border-style: dashed; } p.double { border-style: double; border-color: red; } p.groove { border-style: groove; } p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} </style> <p class="none">Không kẻ khung.</p> <p class="dotted">Kiểu dotted.</p> <p class="dashed">Kiểu dashed.</p> <p class="double">Kiểu double.</p> <p class="groove">Kiểu grooved.</p> <p class="ridge">Kiểu ridged.</p> <p class="inset">Kiểu inset.</p> <p class="outset">Kiểu outset.</p> <p class="hidden">Ẩn kẻ khung (khung không kẻ nhưng độ rộng phần tử vẫn có khung).</p>

Không kẻ khung.

Kiểu dotted.

Kiểu dashed.

Kiểu double.

Kiểu grooved.

Kiểu ridged.

Kiểu inset.

Kiểu outset.

Ẩn kẻ khung (khung không kẻ nhưng độ rộng phần tử vẫn có khung).

Đường viền theo từng cạnh boder-left (top, bottom, right)

Cách viết ở phần trên tác động nên cả bốn cảnh của box, nếu muốn thiết lập cho từng cạnh của box bạn có thể sử dụng thêm thuộc tính.

Thiết lập độ rộng, kiểu đường, màu sắc cho các thuộc tính: border-top, border-right, border-bottom, border-left

<style> p.borderexam2 { border-top: 1px solid green; border-bottom: 2px dotted red; } </style> <p class="borderexam2">Ví dụ kể viền trên dưới</p>

Ví dụ kể viền trên dưới

Tương tự như border-color, border-width, boder-style bạn cũng định nghĩa từng tham số màu, độ rộng, kiểu đường một cách riêng biệt cho từng cạnh với, với các thuộc tính

• border-left-width
• border-left-style
• border-left-color
• border-top-width
• border-top-style
• border-top-color
• border-right-width
• border-right-style
• border-right-color
• border-bottom-width
• border-bottom-style
• border-bottom-color

Tham khảo thêm CSS bo tròn góc với css :border-radius

Mục lục bài viết Công cụ phát sinh CSS BorderThuộc tính css borderborder-width, border-color, border-styleborder-top (bottom, left, right) ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mới Quy tắc @media trong CSS với thiết kế responsive Sử dụng Grid bố cục trang trong CSS Thuộc tính transition biến đổi động các thuộc tính CSS Các thuộc tính left top right bottom trong CSS Thuộc tính text-overflow trong CSS Mô hình hộp box css và thuộc tính box-sizing Thuộc tính white-space định dạng khoảng trắng trong CSS Đổ bóng text-shadow trong CSS Thuộc tính text-decoration và text-indent CSS Căn lề text-align và vertical-align trong CSS padding - Khoảng padding (Bài trước) (Bài tiếp) Bo góc Giới thiệuPrivacyTừ điển Anh - ViệtChạy SQLRegExpCubic-bezierUnix timestampKý tự HTMLcalories, chỉ số BMRchỉ số khối cơ thể BMITạo QR CodeLịch vạn niên Liên hệ RSS

Đây là blog cá nhân, tôi ghi chép và chia sẻ những gì tôi học được ở đây về kiến thức lập trình PHP, Java, JavaScript, Android, C# ... và các kiến thức công nghệ khác Developed by XuanThuLab