در این قسمت از آموزش جامع CSS از این ویژگی border-radius برای گرد کردن گوشه های یک عنصر استفاده می شود.
این ویژگی از نوع ویژگی های مختصر نویسی برای ویژگی های زیر می باشد که هر کدام از آنها مخصوص یک گوشه عنصر هستند:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius می تواند یک تا چهار مقدار داشته باشد و اگر مقادیر را با استفاده از / از هم جدا کنیم می تواند هشت مقدار بپذیرد. که در هر سمت اسلش می تواند بین یک تا چهار مقدار وجود داشته باشد.
اگر چهار مقدار داشته باشد, اولین مقدار مربوط به گوشه بالا سمت چپ, دومین مقدار مربوط به گوشه بالا سمت راست, سومین مقدار مربوط به گوشه پایین سمت راست و مقدار آخر مربوط به گوشه پایین سمت چپ خواهد بود. (جهت ساعتگرد به شما برای بخاطر سپردن ترتیب کمک می کند)
اگر سه مقدار داشته باشد, اولین مقدار مربوط به گوشه بالا سمت چپ, دومین مقدار مربوط به گوشه های بالا سمت راست و پایین سمت چپ, و مقدار آخر مربوط به گوشه پایین سمت راست می باشد.
در صورتی که دو مقدار داشته باشد, اولین مقدار مربوط به گوشه بالا سمت چپ و پایین سمت راست و دومین مقدار مربوط به گوشه های بالا سمت راست و پایین سمت چپ می باشد.
اگر یک مقدار داشته باشد, آن مقدار به تمام گوشه ها تعلق می گیرد و انحنای گوشه ها با هم برابر خواهد بود.