گوشه‌های گرد

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

با ویژگی border-radius در CSS، می‌توانید به هر عنصری «گوشه‌های گرد» بدهید.[۱]

ویژگی border-radius در CSS

ویژگی border-radius در CSS میزان گرد شدن گوشه‌های یک عنصر را تعریف می‌کند.

نکته: این ویژگی به شما اجازه می‌دهد که به عناصر گوشه‌های گرد اضافه کنید!

در اینجا سه مثال وجود دارد:

  1. گوشه‌های گرد برای یک عنصر با رنگ پس زمینه مشخص:
  2. گوشه‌های گرد برای یک عنصر دارای کادر:
  3. گوشه‌های گرد برای عنصری با تصویر پس زمینه:

در اینجا کد وجود دارد:

مثال

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}


نکته: ویژگی border-radius در حقیقت یک ویژگی مختصر برای ویژگی هایborder-top-left-radius، border-top-right-radius، border-bottom-right-radius و border-bottom-left-radius است.

ویژگی border-radius در CSS - مشخص کردن هر گوشه

ویژگی border-radius می‌تواند از یک تا چهار مقدار داشته باشد. قوانین به صورت زیر است:

  • چهار مقدار - border-radius: 15px 50px 30px 5px; (اولین مقدار به گوشه بالا-چپ اعمال می‌شود، دومین مقدار به گوشه بالا-راست، سومین مقدار به گوشه پایین-راست، و چهارمین مقدار به گوشه پایین-چپ اعمال می‌شود):
  • سه مقدار - border-radius: 15px 50px 30px; (اولین مقدار به گوشه بالا-چپ اعمال می‌شود، دومین مقدار به گوشه بالا-راست، و سومین مقدار به گوشه پایین-راست اعمال می‌شود):
  • دو مقدار - border-radius: 15px 50px; (اولین مقدار به گوشه بالا-چپ و گوشه پایین-راست، و دومین مقدار به گوشه بالا-راست و گوشه پایین-چپ اعمال می‌شود):
  • یک مقدار - border-radius: 15px; (مقدار این ویژگی به تمامی چهار گوشه اعمال می گردد، که موجب می‌شود چهار گوشه به میزان برابر گرد شوند):

در اینجا کد مربوطه قرار دارد:

مثال

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}


همچنین شما می‌توانید گوشه‌های بیضی شکل نیز ایجاد کنید:

مثال

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}


خود را با تمرین‌ها امتحان کنید!

ویژگی های گوشه های گرد در CSS

ویژگی توضیحات
border-radius یک ویژگی مختصر برای تنظیم تمامی ویژگی border-*-*-radius
border-top-left-radius شکل کادر در گوشه بالا سمت چپ را تعریف می‌کند
border-top-right-radius شکل کادر در گوشه بالا سمت راست را تعریف می‌کند
border-bottom-right-radius شکل کادر در گوشه پایین سمت راست را تعریف می‌کند
border-bottom-left-radius شکل کادر در گوشه پایین سمت چپ را تعریف می‌کند

منابع آموزشی