Home > Web Front-end > CSS Tutorial > How to use css border property

How to use css border property

silencement
Release: 2019-05-29 09:15:04
Original
3590 people have browsed it

How to use css border property

css border definition and usage

css border-style property is used to set the style of all borders of an element, or set it individually for each side Border style. The border may appear only if this value is not none.

Example 1

border-style:dotted solid double dashed;
Copy after login

The upper border is dotted

The right border is a solid line

The lower border is a double line

The left border It is a dotted line

Example 2

border-style:dotted solid double;
Copy after login

The upper border is dotted

The right border and left border are solid lines

The lower border is a double line

Example 3

border-style:dotted solid;
Copy after login

The upper and lower borders are dotted

The right and left borders are solid lines

Example 4

border-style:dotted;
Copy after login

All 4 borders are dotted

Instance, Set the style of the four borders

p
  {
  border-style:solid;
  }
Copy after login

Browser support

All browsers support the border-style attribute.

Note: The attribute values ​​"inherit" or "hidden" are not supported in any version of Internet Explorer (including IE8).

Possible values

How to use css border property

##Description

The most unpredictable border style is double. It is defined as the width of two lines plus the space between the two lines equal to the border-width value. However, the CSS specification does not say whether one of the lines is thicker than the other or whether both lines should be equally thick, nor whether the space between the lines should be thicker than the line. All of this is decided by the user agent, and the creatives have no influence on this decision.


The above is the detailed content of How to use css border property. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template