How TO - Remove Contenteditable Border

Learn how to remove the border from an editable element.

Remove Contenteditable Border

By default, when you write inside an element that has contenteditable set to true, that element gets a border around on focus. However, you can use CSS to remove the border:

Step 1) Add HTML:

Example

  <p contenteditable="true">This is an editable paragraph.</p>

Step 2) Add CSS:

Use the [attribute] selector to select all elements that are contenteditable, and remove the border with the outline property:

Example

  [contenteditable] {
  outline: 0px solid transparent;
}

Tip: Go to the HTML contenteditable Attribute Reference to learn more about the global contenteditable attribute.

Tip: Go to the CSS [attribute] Selector to learn more about the [attribute] selector.