CSS instances--borders

Border-image:

• Border-image-source
• Border-image-slice: Clipping, which can be a pixel value or a percentage;
• Border-image-width
• Border-image-outset: The size of the border deviates from the base value, default 0;
• Border-image-repeat:stretch stretching/repeat repeating/round tiling;
  • Demo//Note You need to use a slash between 3 parameters with parameter order in the middle
  • This value should consider the compatibility of different browsers;
  • If you can't see the border under Firefox, check the border-style:solid first;

Border-radius:

• Border-top/button-left/right-radius
• border-radius:100px 25px 50px 50px/50px 25px 50px 25px;

Border-shadow:h-shadow V-shadow [blur/* shadow Blur distance */spread/* Shadow Size */color inset];

• Example:
  • box-shadow:5px 8px 5px 3px red;

• • box-shadow:5px 8px 5px 3px red inset;

CSS instances--borders