border-top-style

CSS border-top-style Property

The CSS border-top-style property is used to set the style of an element’s top border.

This property is specified as a single keyword chosen from those available for the border-style property. The border-style property is used to set the style for all four sides of an element, but border-top-style sets a style only for the top border.

The default width of the top border is medium. It can be changed by using either the border-top-width or border-width properties.

Not all browsers render the styles in the same way. Chrome renders the dots as rectangular ones, not circular ones.

The specification does not specify the amount of spacing between the dots and the dashes.

The specification does not define how borders of different styles connect in the corners.

类目类目
Default Valuenone
Applies toAll elements. It also applies to ::first-letter.
InheritedNo
AnimatableNo
VersionCSS1
DOM Syntaxobject.style.borderTopStyle = “dashed”;

Syntax

Syntax

border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Example of the border-top-style property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2,
      p {
        padding: 15px;
        border: solid #666;
      }
      h2 {
        border-top-style: dashed;
      }
      p {
        border-top-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>A Heading with dashed border-top-style.</h2>
    <p>A paragraph with dotted border-top-style.</p>
  </body>
</html>

Depending on the value of the border-color, the effects of groove, ridge, inset and outset values can be changed.

Result

Example of the border-top-style property with all style values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #1c87c9;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        background-color: #c9c5c5;
        border: 10px solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-top-style example classes */
      .b1 {
        border-top-style: hidden;
      }
      .b2 {
        border-top-style: dotted;
      }
      .b3 {
        border-top-style: dashed;
      }
      .b4 {
        border-top-style: solid;
      }
      .b5 {
        border-top-style: double;
      }
      .b6 {
        border-top-style: groove;
      }
      .b7 {
        border-top-style: ridge;
      }
      .b8 {
        border-top-style: inset;
      }
      .b9 {
        border-top-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Border-top-style value examples</h1>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div class="b2">
        dotted
      </div>
      <div class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

Values

Values

ValueDescriptionPlay it
noneDefines that there won’t be any border.
Default value.Play it »
hiddenIs the same with “none” except in border conflict resolution for table elements.Play it »
dottedDefines a dotted border.Play it »
dashedDefines a dashed border.Play it »
doubleDefines a double border.Play it »
solidDefines a solid border.Play it »
grooveDefines a 3D grooved border. Its effect can be changed with the value of border-color.Play it »
ridgeDefines a 3D ridged border. Its effect can be changed with the value of border-color.Play it »
insetDefines a 3D inset border. Its effect can be changed with the value of border-color.Play it »
outsetDefines a 3D outset border. Its effect can be changed with the value of border-color.Play it »
initialSets the property to its default value.Play it »
inheritInherits the property from its parent element.


请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部