Border and outline to achieve simple edge-stitch effect

Key Knowledge points 1. Border-style

Border-style has four properties: dotted solid double dashed (dotted, solid, double, dashed)

Four properties: upper right and lower left
Three properties: up or down
Two properties: up or down
One property: Up or down

Border-style:dotted solid double dashed;
/* Top Border is dotted to the right border is the
    bottom of the solid line is a
    two-line
    left box is a dashed line
*

Border-style:dotted solid double;
/* The top border is a dotted border is a
    solid
    Bottom border is a double line
* *

Border-style:dotted solid;
    /* Top and Bottom boxes are dotted
    right and left borders are solid lines.

border-style:dotted;
/*
    4 borders are dots
* *

2. Outline

outline:2px dashed #fff; /* Border width Border style border color * *

3. Outline-offset

outline-offset:5px; /* Can be negative * *

property to set the offset of the outline frame outside the border edge

Outlines differs from the border in two aspects: outlines does not occupy space; outlines may not be rectangular 4. Border-radius

border-radius:5px; /* Set Border rounded corners * *

Implementation Effect

Implementation Code

<! DOCTYPE html>
 
Note: Browser compatibility, Outline-offset not compatible with IE