Question 242378 in Html Question posted in
Some basic documentation can be found here.

How to round the corners of a popup that is a separate html file?

I am developing a chrome extension. When a user clicks on the extension, a popup gets opened. The popup is an html file. I have applied border and border-radius on the body element. But then the popup’s corners can be seen coming out of the border. How to fix this issue? Image is attached for reference. I’ve highlighted the corners coming out of the border in red circles.
My code is as follows:

body {
  
  border: 2px solid #ff6100;
  
  border-radius: 0.5rem;

}

popup.html:

<html>
    <body>
        <div class="sidebar">...</div>
    </body>
</html>

manifest.json:

{
   "manifest_version": 3,
   "name": "Sidebar Extension",
   "version": "1.0",
   "action": {
       "default_popup": "popup.html",
    }
}

enter image description here

Tags:

3

Answers


  1. 0

    In css you can add overflow: hidden; to your body element so that it will not come out of the borders.
    I hope it works.

    Login or Signup to reply.
  2. 0

    try background-color:transparent and give inner background if needed

    Login or Signup to reply.
  3. 0

    You can do this by adding some CSS to reset the margin and padding for the element in your popup.html file. Here’s how you can modify your code:

       <!DOCTYPE html>
   <html>
   <head>
   <style>
    body {
        margin: 0;
        padding: 0;
        border: 2px solid #ff6100;
        border-radius: 0.5rem;
      }
    /* Add other styles as needed */
    </style>
    </head>
    <body>
    <div class="sidebar">...</div>
    </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search