کناره‌های گرد CSS

کناره‌های گرد CSS

از طریق CSS border-radius ویژگی‌ای است که می‌تواند هر عنصر را به هر حالتی از

ویژگی border-radius CSS

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

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

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

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

CSS border-radius - تعیین هر گوشه

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 شکل گوشه پایین چپ حاشیه را تعریف می‌کند.