CSS Border and Border-radius

Source: Internet
Author: User

First, border

The 3 attributes of border are Border-width, Border-style, Border-color, respectively.

where Border-color defaults to the foreground color of the element content, border-width defaults to the keyword medium, but the border-style default is none; So, without specifying Border-style, the border will not exist .

About Border-color

Transparent, which is said to be miraculous in certain circumstances, needs to be known to have such an optional value.

White, dotted border, sometimes wonders.

Like what:

Rather, the dotted/dashed border should be the same color as the background color of the parent element.

8 Kinds of Border-style:

(Only if you remember it, you can use it when you need it.) )

About Mixed Border

With CSS cascading, we can even set different widths, styles, and colors for the borders in four directions, depending on the situation.

Second, Border-radius

Syntax rules:

Border-radius:a b c D; The order is top left, top right, bottom right, bottom left . (Clockwise direction)

BORDER-RADIUS:A b c D/a B C D.; The first group is the horizontal value and the second group is the vertical value.

border-Top-left-radius:a b; Single rounded corners are set up.

( when defining a single fillet, be sure to go up and down, or left or right, otherwise invalid.) )


The fillet is not valid for the presence of a border, that is, even if there is no border, it can be set up with rounded corners, which can take effect on the background.

Little tips:border-radius:50%

Third, Box-shadow

H-shadow (required, horizontal shadow position, can be negative);

V-shadow (required, vertical shadow position, can be negative);

Blur (optional, fuzzy distance);

Spread (optional, shadow size);

Color (optional, shadow colors);

Outset (default)/inset (optional, change the outer shadow to an inner shadow).

Tips: Using Box-shadow to achieve border effects


1{2    width:200px;  3    height:100px;  4    background-color: #ccc;  5    border:10px solid red;  6    border-radius: 10px;  7    box-shadow: 0 0 0 10px Green8 }


CSS Border and Border-radius

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.