Home > Web Front-end > HTML Tutorial > Introduction to the border-style attribute

Introduction to the border-style attribute

高洛峰
Release: 2017-03-17 09:53:38
Original
3171 people have browsed it

The border-style attribute is used to set the style of all borders of an element, or to set the border style for each side individually.

The border may appear only when 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 is a dotted line

Example 2

border-style:dotted solid double;
Copy after login
  • The upper border is dotted

  • The right and left borders are solid lines

  • The lower border is double lines

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

##Inheritance: noVersion: CSS1JavaScript Syntax:
Default value: not specified
object.style.borderStyle=" dotted double"
Possible values

##ValuenonehiddendotteddashedsoliddoublegrooveridgeinsetoutsetinheritDescription
Description
Define no border.
Same as "none". Except when applied to tables, for which hidden is used to resolve border conflicts.
Define dotted border. Renders as a solid line in most browsers.
Define dashed line. Renders as a solid line in most browsers.
Define a solid line.
Define double line. The width of the double line is equal to the value of border-width.
Define the 3D groove border. The effect depends on the value of border-color.
Define the 3D ridge border. The effect depends on the value of border-color.
Define the 3D inset border. The effect depends on the value of border-color.
Define the 3D outset border. The effect depends on the value of border-color.
Specifies that the border style should be inherited from the parent element.

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 Introduction to the border-style attribute. 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