How to Remove the Border of Editable Content

Learn how to remove the border from editable elements.

Remove the border of editable content

By default, when you are in contenteditable set to true when content is written inside the element, the element will get a border when focused.

However, you can use CSS to remove the border:

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

Use [attribute] The selector selects all contenteditable elements and uses outline Remove Border for Attribute:

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