1. Home

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;
}
Try it Yourself »
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.

Categories

HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

Contact US