border-bottom-width

از ویژگی border-bottom-width برای تعیین عرض حاشیه پایین یک عنصر استفاده می شود.

مقدار این عنصر می تواند یک عدد با واحد طولی باشد یا اینکه یکی از کلمات کلیدی medium، thin و thick باشد. که این کلمات به ترتیب به معنی نازک، معمولی و ضخیم می باشند.

 


border-bottom-width: 2px;
border-bottom-width: 0.2em;
border-bottom-width: thin;

 

مقدار اولیه یا initial برای این ویژگی medium است اما چون مقدار اولیه border-style برابر با none است عرضی که مورد استفاده قرار می گیرد 0 می باشد و حاشیه نشان داده نمی شود.

نکته دیگر اینکه این ویژگی می تواند مقدارش را از عرض حاشیه پایینی عنصر پدرش به ارث ببرد و برای این کار فقط کافی است از کلمه inherit به عنوان مقدار استفاده کنیم:

 


.baba {
  border-bottom-width: 10px;
}

.gol-pesare-baba {
  border-bottom-width: inherit; /* 10px */
}

 

همچنین رنگ و نوع حاشیه عنصر را می توان به ترتیب از طریق ویژگی های border-bottom-color و border-bottom-style تعیین کرد.

 
دموی زیر را بررسی کنید و مقدار عرض حاشیه را تغییر دهید:

 

See the Pen border-bottom-width by Mojtaba Seyedi (@seyedi) on CodePen.