CSS border-radius Property
CSS border-radius is a shorthand property used to give values from one to four to make corners round to an element, which is described below:
- border-radius with one value: Only one value is used for every corner equally.
- border-radius with two values: The first value is used for the top-left corner and the bottom-right corner, and the second value is used for the top-right corner and the bottom-left corner
- border-radius with three values: The first value is used for the top-left corner, The second value is for top-right corner and bottom-left corner, and the third value is for bottom-right corner.
- border-radius with four values: The first value is applied to the top-left corner, The second value is applied to the top-right corner, the third value is used to the bottom-right corner, and the fourth value is used to the bottom-left corner.
We will explore all those values of border-radius Property & understand them with the help of examples.
CSS Rounded Corners
CSS Rounded Corner facilitates the border-radius Property to create corners round for the element. The border-radius Property in CSS is used to define the radius and make corners round from the outer border edge of a specific element. This article will cover all the related aspects of the border-radius Property & understand them with the help of suitable examples.
Table of Content
- CSS border-radius Property
- border-radius with One Value
- border-radius with Two Values
- border-radius with Three Values
- border-radius Four Values
- Other CSS border Property
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left- radius
Contact Us