border

توسط ویژگی border می توان عرض، نوع و رنگ حاشیه هر چهار سمت یک عنصر را تعریف کرد.

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

باید توجه داشته باشیم که هر کدام از این سه ویژگی هم کوتاه شده ای برای چهار ویژگی دیگر هستند:

برای بررسی ویژگی های بالا و مقادیر اولیه شان به مطلب مخصوص به آن مراجعه کنید.

 
ویژگی border سه مقدار می پذیرد و اگر هر کدام از مقادیر را تعیین نکنیم به مقدار اولیه اش ریست می شود.


.element {
  border: 1em; /* color = currentColor style = none */

  /* یا */
  border: solid orange; /* width = 0 */

  /* یا */
  border: 1px dotted #eee;

  /* یا */
  border: 5px solid teal;
}

 

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

 
در دموی زیر حاشیه عنصر را تغییر دهید:

 

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


 

سوالت رو توی پنل بحث و گفتگو مطرح کن.

5 دیدگاه برای “border

  1. ببخشید جناب سیدی در اچ تی ام ال وقتی مثلا میخوایم با استفاده از یوآراِل یه آدرس بدیم دوتا “” میذاریم این فرقش با ” چیه؟

    1. توی HTML فرقی نمی کنند و از هر کدوم استفاده کنید مشکلی پیش نمیاد ولی همیشه از یکی استفاده کنید. توصیه میشه توی HTML از double quotes استفاده کنید. منظور از دوتاییش استفاده کنید.

  2. سلام
    ممنون از آموزشات خوبتون
    چطور میشه بردر رو به صورت مربعی در بیاریم که گوشه هاش صاف نباشه یعنی منهنی باشه نمیدونم گرفتید یا نه مربعش کامل شکسته نشده باشه سایتتونم واقعا عالیه :-)

  3. سلام
    ممنون از آموزشات خوبتون
    چطور میشه بردر رو به صورت مربعی در بیاریم که گوشه هاش صاف نباشه یعنی منحنی باشه نمیدونم گرفتید یا نه مربعش کامل شکسته نشده باشه سایتتونم واقعا عالیه :-)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *