css3-border (Border-radius, Box-shadow, Border-image)

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)