Khóa học CSS - Bài 04 - Định dạng đường viền

Quay về mục lục TỰ HỌC CSS

Thuộc tính border của CSS cho phép ta định dạng các thuộc tính đường viền của đối tượng HTML như:

• Style – Kiểu
• Width – Bề rộng
• Color – Màu sắc

1. Kiểu

Đường viền trong CSS có các kiểu sau:

dotted – viền chấm

dashed – viền đứt nét

solid – viền liền nét

double – viền đôi

groove – viền nổi 3d

ridge – viền nổi 3d (ngược sáng với groove)

inset – viền tô đậm bên trong

outset – viền tô đậm bên ngoài

none – không có viền

hidden – viền bị ẩn đi

Ví dụ:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

và mã HTML trong phần body như sau:

<p class="dotted">Kiểu đường viền dotted</p>

<p class="dashed">Kiểu đường viền dashed</p>

<p class="solid">Kiểu đường viền solid</p>

<p class="double">Kiểu đường viền double</p>

<p class="groove">Kiểu đường viền groove</p>

<p class="ridge">Kiểu đường viền ridge</p>

<p class="inset">Kiểu đường viền inset</p>

<p class="outset">Kiểu đường viền outset</p>

<p class="none">Không có đường viền</p>

<p class="hidden">Kiểu đường viền hidden</p>

<p class="mix">Kiểu đường viền phối hợp</p>

2. Độ dày

Độ dày của đường viền trong CSS (border-width) được xác định bằng số pixels cụ thể hoặc 02 giá trị: thin, medium hoặc thick.

Ta có thể thiết lập riêng giá trị độ dày cho mỗi cạnh.

Ví dụ:

p.conso {
    border-style: solid;
    border-width: 5px;
}

p.giatri {
    border-style: solid;
    border-width: medium;
}

p.mix {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

và mã HTML trong phần body như sau:

<p class="conso">Độ dày viền bằng pixel</p>

<p class="giatri">Độ dày viền bằng giá trị</p>

<p class="mix">Độ dày viền phối hợp</p>

3. Màu sắc

Màu sắc đường viền (border-color) được xác định bằng các loại giá trị sau:

a.       Tên màu. Ví dụ: red, green.

b.      Giá trị mã hex. Ví dụ: #ff0000

c.       Giá trị RGB. Ví dụ: rgb(255,0,0)

d.      transparent – viền trong suốt

Giá trị border-color có thể xác định riêng lẻ cho mỗi cạnh đường viền.

Nếu không thiết lập gì, giá trị border-color sẽ được thừa hưởng từ phần tử HTML.

Ví dụ:

p.tenmau {
    border-style: solid;
    border-color: green;
}

p.mahex {
    border-style: solid;
    border-color: #ff0000;
}

p.rgb {
    border-style: solid;
    border-color: rgb(0,0,255);
}


p.trongsuot {
    border-style: solid;
    border-color: transparent;
}

p.mix {
    border-style: solid;
    border-color: red green blue yellow;
}

và đây là mã HTML trong phần body:

<p class="tenmau">Màu viền bằng tên</p>

<p class="mahex">Màu viền mã hex</p>

<p class="rgb">Màu viền rgb</p>

<p class="trongsuot">Màu viền trong suốt</p>

<p class="mix">Màu viền phối hợp</p>

4. Sự phân chia từng hướng

Giá trị border-style có thể thiết lập riêng theo từng hướng

a.       Nếu có 04 giá trị thì lần lượt sẽ là các hướng: top-right-bottom-left

b.      Nếu có 03 giá trị thì lần lượt sẽ là các hướng: top , right-left, bottom

c.       Nếu có 02 giá trị thì lần lượt sẽ là các hướng:top-bottom, right-left

d.      Nếu có 01 giá trị thì lần lượt tất cả các hướng đều có giá trị này.

Quy luật này cũng đúng với border-color và border-width.

Ví dụ:

p.rieng {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

p.chung1 {
    border-style: solid;
}

p.chung2 {
    border-style: solid dotted;
}

p.chung3 {
    border-style: solid dotted dashed;
}

p.chung4 {
    border-style: solid dotted dashed double;
}

và phần mã HTML trong thẻ body như sau:

<p class="rieng">Định dạng viền riêng biệt</p>

<p class="chung1">Định dạng viền 01 giá trị</p>

<p class="chung2">Định dạng viền 02 giá trị</p>

<p class="chung3">Định dạng viền 03 giá trị</p>

<p class="chung4">Định dạng viền 04 giá trị</p>

5. Viết tắt

Ta có thể gộp chung các giá trị border theo quy tắc sau:

border-width border-style border-color

Trong đó phần border-style là bắt buộc.

Ví dụ:

p {
    border: 5px solid red;
}

6. Bo góc

Ta dùng thuộc tính border-radius

Ví dụ:

p {
    border: 2px solid red;
    border-radius: 5px;
}

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Quay về mục lục TỰ HỌC CSS

• Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
• Trang fan page: https://www.facebook.com/lophocvitinhcom
• Trang web: http://lophocvitinh.com

Tác giả: #drM

Nguồn: Sưu Tầm