Border and outline to achieve simple edge-stitch effect

Source: Internet
Author: User
Tags border color dashed line
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.