CSS border-top-style Property

Description

The border-top-style property controls how the top edge of an element's border is rendered, determining whether that edge is visible and what visual pattern it presents. It applies solely to the top side of the element's border box, so it can be used to create asymmetric borders where the top differs from the left, right, and bottom edges. Because it affects only the visual rendering of the border, its effect is most noticeable when combined with corresponding border width and color settings; where no visible style is applied, the top edge will not contribute to the element's drawn outline.

In the cascade and computed style, border-top-style interacts with shorthands and more general declarations. For example, the shorthand border-top can set the top style together with top width and top color in one declaration, while border-style can provide a quick way to set styles for all four edges at once. Individual aspects of the top border such as thickness and color are controlled separately by border-top-width and border-top-color, and the final rendered result is the combination of those three: style determines whether and how the line is drawn, width sets its extent, and color gives it hue. More specific declarations (for the top edge) will override more general ones (for all edges) according to normal CSS cascade rules.

There are a few layout and rendering contexts where the behavior of the top border requires special attention. In table layouts that use collapsing borders, the value for the top edge of a cell participates in conflict resolution with adjacent cells, so the ultimately drawn border can be selected according to table rules rather than simply taking one cell’s top setting; see border-collapse for how those rules affect adjacent edges. Also, changes to the top border’s style often require a repaint of the element and may not produce smooth visual transitions in the same way that changes to color or transform do, so if you intend to animate border changes you should test the visual effect and consider animating properties that interpolate more cleanly.

For practical use, border-top-style is a precise tool for creating separators, tabs, and subtle UI accents that rely on a single edge. When combined thoughtfully with matching widths and colors it can help establish hierarchy and rhythm in a design without altering the element’s content flow. Because a top border’s visibility depends on the combination of style, width, and color, it’s best to think of it as one component of an element’s overall edge treatment rather than a standalone visual signal.

Definition

Initial value: none
Applies to: All elements
Inherited: No
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.borderTopStyle

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

border-top-style: <line-style>

Values

noneBorder is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn.
hiddenSame as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.
dottedA series of round dots.
dashedA series of square-ended dashes.
solidA single line segment.
doubleTwo parallel solid lines with some space between them.
grooveDisplays a border leading to a carved effect. It is the opposite of ridge.
ridgeLooks as if it were coming out of the canvas.
insetLooks as if the content on the inside of the border is sunken into the canvas.
outsetLooks as if the content on the inside of the border is coming out of the canvas.
inherit

Example

HTML

<div class="examples">

    <h2>border-top-style examples</h2>

    <div class="grid">

        <div class="box solid">solid</div>

        <div class="box dashed">dashed</div>

        <div class="box dotted">dotted</div>

        <div class="box double">double</div>

        <div class="box groove">groove</div>

        <div class="box ridge">ridge</div>

        <div class="box inset">inset</div>

        <div class="box outset">outset</div>

        <div class="box none">none</div>

        <div class="box hidden">hidden</div>

    </div>

</div>

CSS

.examples {
    font-family: Arial, Helvetica, sans-serif;
    padding: 20px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.box {
    padding: 12px 16px;
    background: #f8f9fb;
    border-radius: 6px;
    border-top-width: 6px;
    border-top-style: solid;
    border-top-color: #1a73e8;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    text-transform: capitalize;
}

.box.solid { border-top-style: solid; }
.box.dashed { border-top-style: dashed; }
.box.dotted { border-top-style: dotted; }
.box.double { border-top-style: double; }
.box.groove { border-top-style: groove; }
.box.ridge { border-top-style: ridge; }
.box.inset { border-top-style: inset; }
.box.outset { border-top-style: outset; }
.box.none { border-top-style: none; }
.box.hidden { border-top-style: hidden; }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-top-style property. Hover over a browser icon to see the version that first introduced support for this CSS property.