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 contenteditable Set to true when content is written within the element, the element will receive a border when focused.

However, you can use CSS to remove the border:

First Step - Add HTML:

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

Second Step - Add CSS:

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

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

Try It Yourself

Related Pages

Reference Manual:Propriedade contenteditable do HTML

Reference Manual:CSS [AttributeSelector