CSS Borders
Border Style
<style>
p.myStyle {
border-style: solid;
}
p.myStyle2 {
border-style: dashed;
}
p.myStyle3 {
border-style: dotted;
}
p.myStyle4 {
border-style: double;
}
p.myStyle5 {
border-style: none;
}
p.mixed {
border-style: dotted dashed solid double ;
}
</style>
<p class="myStyle">solid border</p>
<p class="myStyle2">dashed border</p>
<p class="myStyle3">dotted border</p>
<p class="myStyle4">double border</p>
<p class="myStyle5">no border</p>
<p class="mixed">mix</p>
solid border
dashed border
dotted border
double border
no border
mix
Ta thấy nếu ta dùng border-style : solid; thì cả 4 hướng đều là solid. Nếu ta muốn xét mỗi cạnh là 1 dạng khác nhau ta dùng cấu trúc: border-style: top right bottom left; . Ta nhớ thứ tự theo chiều kim đồng hồ.
Border Sides
Border có 4 hướng là top, right, buttom, left. Nếu ta muốn xét border cho left ta làm như sau.
<style>
p.myStyle6 {
border-left-style: dashed;
}
</style>
<p class="myStyle6">Left</p>
Left
Như vậy ta sẽ có thể xét từng hướng:
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
Ta có thể xét 2 hướng cùng lúc : border-style: solid dashed;
- top và bottom : solid
- left và right : dashed
<style>
p.myStyle7 {
border-style: solid dashed;
}
</style>
<p class="myStyle7">top/bottom is solid. left/right is dashed</p>
top/bottom is solid. left/right is dashed
Còn nếu xét 3 hướng: border-style: dashed dotted solid; /* top left/right bottom */
<style>
p.myStyle8 {
border-style: dashed dotted solid;
}
</style>
<p class="myStyle8">top is dashed, left/right is dotted, bottom is solid</p>
top is dashed, left/right is dotted, bottom is solid
Rounded borders
<style>
p.myStyle9 {
border-style:solid;
border-radius: 5px;
}
</style>
<p class="myStyle9">Rounded</p>
Rounded
Borders Width
<style>
p.myStyle10 {
border-style:solid;
border-radius: 5px;
border-width: 5px;
}
</style>
<p class="myStyle10">border width</p>
border width
Ta cũng có thể xét từng cạnh của border. Ta xem ví dụ sau.
<style>
p.myStyle11 {
border-style:solid;
border-radius: 5px;
border-width: 5px 1px 3px 10px;
}
</style>
<p class="myStyle11">border width</p>
border width
Borders Colors
<style>
p.myStyle12 {
border-style:solid;
border-radius: 5px;
border-color: tomato;
}
</style>
<p class="myStyle12">border color</p>
border color
Ta cũng có thể xét màu từng cạnh.
<style>
p.myStyle13 {
border-style:solid;
border-radius: 5px;
border-color: tomato green blue violet;
}
</style>
<p class="myStyle13">border color</p>
border color
Borders Shorthand
<style>
p.myStyle14 {
border: 4px solid tomato;
}
</style>
<p class="myStyle14">border shorthand</p>
border shorthand
Ta cũng có thể xét 1 hướng
<style>
p.myStyle15 {
border-left: 4px solid tomato;
}
</style>
<p class="myStyle15">border shorthand</p>
border shorthand
Tóm lại:
- border-style: none;
- boder-style: solid;
- border-style: dashed dotted solid double; /* top right bottom left */
- boder-style: dashed dotted; /* top/bottom left/right */
- border-style: dashed dotted solid; /* top left/right bottom */
- border-radius: 5px;
- border-width: 5px;
- border-width: 5xp 2px 1px 4px;
- border-color: red;
- border-color: red green blue violet;
- border: 5px solid red;
- border-left: 5px solid red;