How to remove border from element css

CssHow-ToBeginner · 3 min read

How to Remove Border from Element in CSS: Simple Guide

To remove a border from an element in CSS, use the border: none; property. This tells the browser not to display any border around the element.

📐

Syntax

The CSS property to remove a border is border with the value none. This means no border will be shown on the element.

border: The shorthand property for all border styles.
none: Removes any border from the element.

css

selector {
  border: none;
}

💻

Example

This example shows a box with a red border initially, then the border is removed using border: none;.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove Border Example</title>
<style>
  .box {
    width: 150px;
    height: 150px;
    border: 4px solid red;
    margin-bottom: 20px;
  }
  .no-border {
    border: none;
  }
</style>
</head>
<body>
  <div class="box">With Border</div>
  <div class="box no-border">Border Removed</div>
</body>
</html>

Output

Two square boxes stacked vertically: the top box has a thick red border, the bottom box has no border and looks like a plain colored square.

⚠️

Common Pitfalls

Sometimes borders don't disappear because:

You only set border-color: transparent; but the border style or width still exists, so space remains.
You forget to override all border sides if they are set individually (like border-top, border-left).
Using border: 0; also works but border: none; is clearer.

css

/* Wrong: border still takes space */
.element {
  border-color: transparent;
  border-style: solid;
  border-width: 2px;
}

/* Correct: removes border completely */
.element {
  border: none;
}

📊

Quick Reference

Use this quick guide to remove borders:

Property	Value	Effect
border	none	Removes all borders from the element
border-width	0	Removes border width but style may remain
border-style	none	Removes border style, hides border
border-color	transparent	Makes border invisible but space remains

✅

Key Takeaways

Use border: none; to completely remove borders from an element.

Setting only border-color: transparent; hides color but not border space.

Make sure to override all individual border sides if they are set separately.

border: 0; also removes borders but border: none; is clearer.

Test changes in the browser to confirm borders are fully removed visually.