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.