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:
Tip: Go to our HTML contenteditable Attribute Reference to learn more about the global contenteditable attribute.
Tip: Go to our CSS [attribute] Selector to learn more about the [attribute] selector.
