Border Radius Property
The border-radius Property
With CSS3, you can give rounded corners to any element by using the border-radius property. Specific border-radius values can be applied for the border-radius property in the following order: top-left, top-right, bottom-right, and bottom-left. Similarly, we can create a circle by setting the border radius to 100%.
Syntax:-
Its syntax is:-
< style >
element{
border-radius: 1-4 length| % / 1-4 length| %| initial| inherit;
}
< /style >
Further Explanation:-
| Value | Description |
|---|---|
| length | Specifies the shape of the corners. |
| % | Specifies the shape of the corners in %. |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Code Explanation
All Tutorials related to CSS3
CSS3 Intro
Vendor Prefixes
Border Radius Property
Box Shadow Property
Transparency
Text Shadow
Pseudo Classes
Pseudo Elements
Word Wrap
@Font-Face
Linear Gradients
Radial Gradient
Background Size
Background Clip
Opacity
Transitions
Transform Rotate
Translate Skew
Scale and Multiple
Animations
Animation Properties
3D Transform
CSS Filters 1
CSS Filters 2
CSS Filter 3
