JAVAEE--CSS border Style

Statement: The material used in this column is written by the VIP students of the Kay Academy, who has the right to be anonymous and has the final right to interpret the article; The Edith Academy is designed to promote students to learn from each other on the basis of public notes.

Border Style

The border property can be used to control the border style of a label, and the size of the border is measured in px.
Line styles for commonly used borders:
Solid Solid Line
None Borderless Line
Double Two-wire
Dashed dashed line
code example:

Operation Result:

Mind Mapping:

The border can be controlled according to the upper and lower sides:
Border-top Top Border
Border-bottom Bottom Border
Border-left left Box
Border-right Right Border
code example:

Operation Result:

Mind Mapping:

The border can also adjust the radian of the corners:
Border-radius Adjust the radian of the frame, units can be used px and%
Adjust the picture's border to a circular example:

Operation Result:

Example of adjusting the text box radians:

Operation Result:

You can also adjust the radian for the corners:
Border-bottom-left-radius Adjust the radian in the lower left corner
Border-bottom-right-radius Adjust the radian in the lower right corner
Border-top-right-radius Adjust the radian in the upper right corner
Border-top-left-radius Adjust the radian in the lower right corner

code example:

Operation Result:

To adjust the shadow of a component:
Box-shadow You can adjust the shadow area of the component, or you can set the color of the shadow:
code example:

Operation Result:

A halo-like effect can be achieved with the first two values set to 0: code example:

Operation Result:

Picture border: Border-image
You can use this property to set the picture to a border, at the end you can use round or stretch to define the picture around it or to stretch the effect.
code example:

Operation Result:

code example:

Operation Result:

JAVAEE--CSS border Style