آموزش گوشه های گرد شده در CSS

ویژگی border-radius در CSS

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

نکته: این ویژگی به ما امکان می دهد تا برای عناصر، گوشه های گرد شده تعریف کنیم. به سه مثال زیر توجه کنید:

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

2. ایجاد گوشه های گرد شده برای یک عنصر، به همراه کادر(border):

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

ما همچنین می توانیم گوشه های بیضوی(elliptical) ایجاد کنیم:

#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