Thuộc tính border trong HTML DOM Style

Thuộc tính border là shorthand để đặt/ lấy cùng lúc ba thuộc tính: border-width, border-style, border-color.

Cú pháp

object.style.border = "width style color|initial|inherit"

Tham số

Tham số	Mô tả
Width	Độ dày viền (px, em, thin, medium, thick...).
Style	Kiểu viền (solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden).
Color	Màu viền (tên màu, hex, rgb, rgba...).
initial	Đặt về mặc định.
inherit	Kế thừa từ cha.

Ví dụ

Thay đổi viền ảnh:

<!DOCTYPE html> <html> <head> <style> 
  #IMG1 { 
    border: 2px solid orange; 
    box-shadow: 2px 2px 4px 1px seagreen; 
  } 
</style> 
<script> 
  function changeBorder(){ 
    document.getElementById("IMG1").style.border = "4px dotted pink"; 
    document.getElementById("Sample").innerHTML = "Viền ảnh đã được thay đổi"; 
  } 
</script> </head> 
<body> 
<h2>Học XAMARIN</h2> 
<img id="IMG1" src="https://www.tutorialspoint.com/xamarin/images/xamarin-minilogo.jpg"> 
<p>Nhấn nút để thay đổi viền ảnh</p> 
<button onclick="changeBorder()">THAY ĐỔI VIỀN</button> 
<p id="Sample"></p> 
</body> </html>

Kết quả

Viền ban đầu 2px solid orange:

Thuộc tính border trong HTML DOM Style

Sau khi nhấn nút: 4px dotted pink:

Thuộc tính border trong HTML DOM Style