How do I outline the script editor web part / content editor web part

Question

similar to the question mention How do I round the corners of my web part titles on my SharePoint site? [ How do I round corners of web part titles? ], I would like to see , the put a black outline border on my script editor / content editor web part, how to achieve the same ?

I used the https://www.w3schools.com/css/css_outline.asp link and its sample to outline for a paragraph, custom html. But here in my case, its a the list view web part itself and another script editor web part

Answer 1

Inspect page to get the content editor id then apply CSS for it:

#divid
{
   border: 1px solid red;
   padding:5px;
}

Refer here & here to understand better.

There is no way yet to identify CSS only for contenteditor webpart. this selector ms-rtestate-field is used to apply CSS for all webparts.

Answer 2

Here is a demo for your reference:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">           
    $(function () {
        //add outline to script editor webpart
        $(".s4-wpcell-plain.ms-webpartzone-cell.ms-webpart-cell-vertical.ms-fullWidth ").css("outline", "#ff9e0f solid 10px")

        //add outline to list web part
        $(".ms-webpartzone-cell.ms-webpart-cell-vertical.ms-fullWidth.s4-wpActive").css("outline", "#4CAF50 solid 10px");
    });            
</script>

Screenshot of result: