ویژگی CSS-radius

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

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

در اینجا سه ​​مثال آورده شده است:

1. گوشه های گرد شده برای عنصری با رنگ زمینه مشخص شده:

 

 

 

 

 

2. گوشه های گرد شده برای یک عنصر با حاشیه:

 

 

 

 

 

2. گوشه های گرد شده برای یک عنصر با حاشیه:

 

 

 

 

 

این کد است:

مثال

#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خصوصیت می تواند از یک تا چهار مقدار را داشته باشد. در اینجا قوانین وجود دارد:

چهار مقدار – شعاع مرز: 15px 50px 30px 5px؛ (مقدار اول مربوط به گوشه بالا سمت چپ ، مقدار دوم مربوط به گوشه بالا سمت راست ، مقدار سوم مربوط به گوشه پایین سمت راست و مقدار چهارم مربوط به گوشه پایین سمت چپ اعمال می شود):

این کد است:

مثال

#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;
}

منبع