خاصیت حاشیه - Border در CSS

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-05-22 14:56:18

حاشیه ها یا Border ها یکی دیگر از کاربردی ترین خاصیت ها در CSS هستند که توانایی ایجاد حاشیه ها برای مشخص کردن محدوده یک المنت در طراحی سایت را دارد. این خاصیت خواهد توانست یک حاشیه برای المنت با مقادیر دلخواه ایجاد کند.

حالت پیش فرض این دستور به همراه مقادیر مجاز:

border: border-width border-style border-color|initial|inherit;

 

حاشیه ما می تواند به صورت یک خط رنگی دلخواه به صورت کامل باشد که کل محدوده دورتا دور المنت ما را بگیرد:

div {
  border: 1px solid #000;
}

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

div {
  border: 1px solid;
}

می تواند به جای یک خط صاف و مستقیم، از خط تیره و یا نقطه چین استفاده کرد:

// حالت خط تیره
div {
  border: 1px dashed #000;
}

// حالت نقطه چین
div {
  border: 1px dotted #000;
}

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

div {
  border-right: 1px solid #000;
}