How to remove the border from an editable element with CSS?

CSSWeb DevelopmentFront End Technology

To remove the border from an editable element, the code is as follows −


 Live Demo

<!DOCTYPE html>
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 40px;
   [contenteditable] {
      outline: 0px solid transparent;
<h1>Remove Contenteditable Border Example</h1>
<p contenteditable="true">This is a contenteditable paragraph which you can edit</p>


The above code will produce the following output −

On clicking the paragraph, you can edit it as in the below screenshot −

Published on 08-May-2020 14:37:30