How to remove border from an editable element using CSS ?

Last Updated : 14 Dec, 2020

Given an HTML document containing some document and the task is to remove border from an editable element using CSS. It is a default behavior of any element which have content-editable attributes set to true whenever, the element gets a focus it will get a border around them. The task can be done by using the [attribute] selector to select all elements that are contenteditable, and remove the border with the outline property.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        [contenteditable] { 
            outline: 0px solid transparent; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2>GeeksForGeeks</h2> 
  
        <h2> 
            How to remove the border from  
            an editable element with CSS? 
        </h2> 
  
        <p contenteditable="true"> 
            This paragraph is editable 
        </p> 
  
    </center> 
</body> 
  
</html>