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