CSS border Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The CSS border property is a shorthand property that allows developers to define the boundaries of an element in a single declaration. It is used to visually separate content, create emphasis, or enhance the overall design of a webpage. A border is essentially a line that surrounds an element’s content and padding, acting as a clear demarcation between the element and its surroundings. While it is possible to set each border side individually using properties like border-top, border-right, border-bottom, and border-left, the border shorthand simplifies styling by allowing width, style, and color to be defined simultaneously.

Borders are more than just visual outlines; they can significantly influence the layout and perception of elements on a page. When a border is applied, it contributes to the element’s total size unless the element uses box-sizing to adjust how dimensions are calculated. This means that even a thin border can subtly affect the spacing between elements, which is crucial for precise layout control in modern responsive design. The border can also interact with other decorative properties like border-radius to create rounded edges, producing a softer, more polished look for boxes, buttons, and containers.

In addition to its structural and aesthetic roles, the border property can serve functional purposes in user interface design. For example, borders can indicate focus states for interactive elements, guide users’ attention, or provide visual cues about hierarchy and grouping. Combined with effects like shadows, gradients, or animations, borders can enhance both usability and engagement, making elements feel more interactive or visually distinct. Overall, mastering the use of the border property enables developers to create visually appealing, organized, and highly readable web layouts.

Definition

Initial value: See individual properties
Applies to: All elements
Inherited: No
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.border

Interactive Demo

border: 3px solid red;

border: 2px dashed #1ECBE1;

border: 1rem dotted rgb(156, 234, 87);

border: thick solid rgba(123, 45, 87, .5);

border: solid;

border: dashed purple;

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: <line-width> || <line-style> || <color>

Values

<line-width>See border-width CSS property for values.
<line-style>See border-style CSS property for values.
<color>See border-color CSS property for values.
inherit

Example

HTML

<body>

  <main class="container">

    <h1>CSS border examples</h1>

    <div class="grid">

      <div class="box box--solid">Solid border</div>

      <div class="box box--dashed">Dashed border</div>

      <div class="box box--rounded">Rounded border</div>

      <div class="box box--double">Double border</div>

      <div class="box box--image">Gradient border</div>

    </div>

  </main>

</body>

CSS

/* Basic page styles */
body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f4f7fb;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.container {
  padding: 32px;
  max-width: 800px;
  width: 100%;
}

h1 {
  margin: 0 0 20px 0;
  font-size: 20px;
}

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

.box {
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(16,24,40,0.06);
  text-align: center;
  font-weight: 600;
}

/* Examples of the border property */
.box--solid {
  border: 4px solid #2ecc71; /* width style color */
}

.box--dashed {
  border: 3px dashed #e67e22;
}

.box--rounded {
  border: 2px solid #3498db;
  border-radius: 12px; /* rounded corners */
}

.box--double {
  border: 6px double #9b59b6;
}

.box--image {
  border: 8px solid; /* required base border for border-image */
  border-image: linear-gradient(45deg, #ff6b6b, #f7c59f) 1;
  border-radius: 8px;
}

Result

Editor

Browser Support

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