Border properties in CSS3: Border-radius, Box-shadow, Border-image
Rounded Corners: Border-radius
Using the CSS3 Border-radius property, you can make a fillet for any element.
If you specify only one value in the Border-radius property, 4 rounded corners are generated.
However, if you want to specify one by one on Four corners, you can use the following rules:
- Four values: The first value is the upper-left corner, the second value is the upper-right corner, the third value is the lower-right corner, and the fourth value is the lower-left corner.
- Three values: The first value is the upper-left corner, the second value is the upper-right corner and the lower-left corner, the third value is the lower-right corner
- Two values: The first value is the upper-left corner and the lower-right corner, the second value is the upper-right corner and the lower-left corner
- One value: Four fillet values are the same
CSS3 Fillet Properties:
Properties |
Description |
Border-radius |
Abbreviations for all four corner Border-*-*-radius properties |
Border-top-left-radius |
Defines the radian in the upper-left corner |
Border-top-right-radius |
Defines the radian in the upper-right corner |
Border-bottom-right-radius |
Defines the radian in the lower right corner |
Border-bottom-left-radius |
Defines the radian in the lower left corner |
Box Shadow: Box-shadow
The Box-shadow property can set one or more drop-down shaded boxes,
syntax:box-shadow: h-shadow v-shadow blur spread color inset;
The Boxshadow property is a comma-delimited list of shadows, each of which is specified by a 2-4-length value, an optional color value, and an optional inset keyword. The value of the omitted length is 0.
value |
Description |
H-shadow |
Required. The position of the horizontal shadow. Allow negative values |
V-shadow |
Required. The position of the vertical shadow. Allow negative values |
Blur |
Optional. Blur Distance |
Spread |
Optional. The size of the shadow |
Color |
Optional. The color of the shadow. |
Inset |
Optional. Change shadow inner Shadow from Outer shadow (start) |
Border Picture: Border-image
With the CSS3 Border-image property, you can create a border with an image, and the Border-image property allows you to specify a picture as the border that creates the original image of the border above.
The Border-image property is shorthand property for setting Border-image-source, Border-image-slice, Border-image-width, Border-image-outset and border-image-repeat values, the omitted values are set to their default values.
Syntax: Border-image: Source Slice width outset repeat| Initial| Inherit;
value |
Description |
Border-image-source |
Used to specify the location of the image to be used to draw the border |
Border-image-slice |
Image boundary Inward offset |
Border-image-width |
Width of the image boundary |
Border-image-outset |
Used to specify the amount of Border-image-area drawn outside the bounding rectangle |
Border-image-repeat |
Lets you set whether the image bounds should be repeated (repeat), stretched (stretch), or covered (round). |
css3-border (Border-radius, Box-shadow, border-image)