از ویژگی border-top-width برای تعیین عرض حاشیه بالای یک عنصر استفاده می شود.
مقدار این عنصر می تواند یک عدد با واحد طولی باشد یا اینکه یکی از کلمات کلیدی medium، thin و thick باشد. که این کلمات به ترتیب به معنی نازک، معمولی و ضخیم می باشند.
border-top-width: 2px;
border-top-width: 0.2em;
border-top-width: thin;
مقدار اولیه یا initial برای این ویژگی medium است اما چون مقدار اولیه border-style برابر با none است عرضی که مورد استفاده قرار می گیرد 0 می باشد و حاشیه نشان داده نمی شود.
نکته دیگر اینکه این ویژگی می تواند مقدارش را از عرض حاشیه بالایی عنصر پدرش به ارث ببرد و برای این کار فقط کافی است از کلمه inherit به عنوان مقدار استفاده کنیم:
.baba {
border-top-width: 10px;
}
.gol-pesare-baba {
border-top-width: inherit; /* 10px */
}
همچنین رنگ و نوع حاشیه عنصر را می توان به ترتیب از طریق ویژگی های border-top-color و border-top-style تعیین کرد.
دموی زیر را بررسی کنید و مقدار عرض حاشیه را تغییر دهید:
See the Pen border-top-width by Mojtaba Seyedi (@seyedi) on CodePen.
سلام خدا قوت
ممنون از آموزش های خوبتون همچنین طراحی عالی سایت که محیطی جذاب و با سلیقه برای کاربر فراهم نموده است . خدایی کلاس های بابا و گل پسر بابا خیلی بامزه بود .