border-width

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

این ویژگی از دسته ویژگی ها مختصر نویسی می باشد که می تواند همزمان مقادیر ویژگی های border-top-width، border-right-width، border-bottom-width و border-left-width را تعیین کند.

این ویژگی می تواند یک، دو، سه و یا چهار مقدار داشته باشد که در نحوه خواندن هر کدام بصورت زیر است:

زمانی که چهار مقدار دارد مقدار اول مربوط به حاشیه بالا، مقدار دوم مربوط به سمت راست، مقدار سوم مربوط به پایین و مقدار چهارم مربوط به سمت چپ خواهد بود.

برای اینکه بتوانید ترتیب را بهتر یاد بگیرید همیشه در جهت ساعت گرد عدد را ها بخوانید: بالا، راست، پایین و چپ.

وقتی سه مقدار وجود دارد، مقدار اول حاشیه بالا، مقدار دوم حاشیه سمت چپ و راست و مقدار سوم حاشیه پایین را نشان می دهند.

اگر دو مقدار داشته باشیم مقدار اول مربوط به حاشیه بالا و پایین، مقدار دوم مربوط به حاشیه های چپ و راست می باشد.

و اگر یک مقدار باشد آن مقدار مربوط به هر چهار طرف عنصر می باشد.

 

border-width: top right bottom left; /* چهار مقدار */
border-width: top right/left bottom; /* سه مقدار */
border-width: top/bottom right/left; /* دو مقدار */
border-width: top/bottom/right/left; /* یک مقدار */

 

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

 

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

 

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

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

 

.baba {
  border-width: 10px;
}

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

 

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

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

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