In this CSS tutorial, we will be going to explore the border-radius property and its accepted values. We will see how this property can be used while styling an element and what other properties are associated with it.
CSS border-radius Property
The border-radius property defines the radius of the elements border’s corners. Using this property, we can also round the corner of an image.
Example
<!DOCTYPE html> <html> <head> <style> p{ border-radius: 25px; border: 2px solid green; background-color: lightblue; padding: 30px; width: 300px; height: 200px; } </style> </head> <body> <p>Border Corners are rounded</p> </body> </html>
Round Specific Corner
There are 4 other properties associated with the border-radius property, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. With the help of these properties we can style specific border corners.
Example Round only the top border corners
<!DOCTYPE html> <html> <head> <style> p{ border-top-left-radius: 25px; border-top-right-radius: 25px; border: 2px solid green; background-color: lightblue; padding: 30px; width: 300px; height: 200px; } </style> </head> <body> <p>Top Border Corners are rounded</p> </body> </html>
Using Shorthand border-radius property
Instead of using border-top-left-radius or border-top-right-radius, we can use the shorthand border-radius property. Using this property with a single statement we can define different radius for every corner. The shorthand border-radius property can accept 4 values at once which represent all the four corners.
Syntax:
selector{ border-radius: top-left top-right bottom-right bottom-left}
Example
<!DOCTYPE html> <html> <head> <style> p{ /* top-left= 25px top-right = 0px bottom-left=50px bottom-right=40px */ border-radius: 25px 0px 40px 50px; border: 2px solid green; background-color: lightblue; padding: 30px; width: 300px; height: 200px; } </style> </head> <body> <p>Border Corners are rounded</p> </body> </html>
border-radius summary
- The CSS border-radius property makes the border corners rounded.
- It accepts values in length units.
- There are 4 child properties associated with border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius
People are also reading: