Home > Others

Border-style border style attributes

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Border style attributes (border-style)

This attribute is used to set the style of the top, bottom, and left borders. Its value is as follows:

None (no border, no matter how large the Border width is)

Dotted (Dot-line Border)

Dashed (broken line Border)

Solid (straight-line Border)

Double (double-line Border)

Groove (groove Border)

Ridge (spine Border)

Inset (border with embedded effects)

Outset (border of the protruding effect)

Example: Examples of CSS border style attributes using none, dotted, dashed, solid, double, groove, ridge, inset, and outset

<HTML>
<Head>
<Title> border style attribute border-style </title>
<Style type = "text/CSS">
. D1 {border-style: none ;}
. D2 {border-style: solid ;}
. D3 {border-style: dotted ;}
. D4 {border-style: dashed ;}
. D5 {border-style: Double ;}
. D6 {border-style: Groove ;}
. D7 {border-style: Ridge ;}
. D8 {border-style: inset ;}
. D9 {border-style: outset ;}
</Style>
</Head>
<Body>
<Div> the default value of the CSS border style (border-style) attribute of this div is none. </Div>
<Br>
<Div class = "d1"> the CSS border style (border-style) attribute of this div is none. </Div>
<Br>
<Div class = "D2"> the CSS border style (border-style) attribute of this div is solid. </Div>
<Br>
<Div class = "D3"> the CSS border style (border-style) attribute of this div is dotted. </Div>
<Br>
<Div class = "D4"> the CSS border style (border-style) attribute of this div is dashed. </Div>
<Br>
<Div class = "D5"> the CSS border style (border-style) attribute of this div is double. </Div>
<Br>
<Div class = "D6"> the CSS border style (border-style) attribute of this div is groove. </Div>
<Br>
<Div class = "D7"> the CSS border style (border-style) attribute of this div is Ridge. </Div>
<Br>
<Div class = "D8"> the CSS border style (border-style) attribute of this div is inset. </Div>
<Br>
<Div class = "D9"> the CSS border style (border-style) attribute of this div is outset. </Div>
<Br>
</Body>
</Html>

 

The default value of the CSS border style (border-style) attribute of this div is none.

The CSS border style (border-style) attribute of this div is none.

The CSS border style (border-style) attribute of this div is solid. Straight-line Border

The CSS border style (border-style) attribute of this div is dotted. Dotted border

The CSS border style (border-style) attribute of this div is dashed. Broken Line border

The CSS border style (border-style) attribute of this div is double. Double-line Border

The CSS border style (border-style) attribute of this div is groove. Groove border

The CSS border style (border-style) attribute of this div is Ridge. Backbone border

The CSS border style (border-style) attribute of this div is inset. Embedded Effect

The CSS border style (border-style) attribute of this div is outset. Protruding Effect

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More