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:

1. border-top-style
2. border-right-style
3. border-bottom-style
4. border-left-style

Ta có thể xét 2 hướng cùng lúc : border-style: solid dashed;

1. top và bottom : solid
2. 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:

1. border-style: none;
2. boder-style: solid;
3. border-style: dashed dotted solid double; /* top right bottom left */
4. boder-style: dashed dotted; /* top/bottom left/right */
5. border-style: dashed dotted solid; /* top left/right bottom */
6. border-radius: 5px;
7. border-width: 5px;
8. border-width: 5xp 2px 1px 4px;
9. border-color: red;
10. border-color: red green blue violet;
11. border: 5px solid red;
12. border-left: 5px solid red;