15

I'm developing chrome extension, I want to make border radius and use radius border propery in css, but it boder in child elemement. My code html here :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="border-radius:10px">
<head>
</head>
<body>
     content here
</body>
</html>

I want border as picture below :

http://postimg.org/image/8ct4dcq93/

dev.knockout
  • 319
  • 2
  • 5
  • 11
  • if this all your code? Also you'll want border-radius, not boder-radius – atmd Jan 12 '15 at 10:19
  • Possibly a typo: `style="boder-radius:10px"` instead of `style="border-radius:10px"` – jbutler483 Jan 12 '15 at 10:19
  • Sorry, I have just edit – dev.knockout Jan 12 '15 at 10:24
  • @dev.knockout: I'm guessing that was just a typo, and not relevant to answering the question? Have you BAC tried adding this style to your body element instead? – jbutler483 Jan 12 '15 at 10:25
  • 2
    Unfortunately, I don't think it's possible, this part of the UI is controlled by Chrome. Do you have an example of an extension that does it, or is it just a "wish I can do it"? – Xan Jan 12 '15 at 10:26
  • Extensions like Evernote seem to inject modals into the content, which may be a path forward if you need more control. – ericpeters0n Oct 26 '15 at 01:58

3 Answers3

19

Unfortunately, I don't think you can do it.

The frame around the popup page (highlighted in red in a graphics editor) is fully controlled by Chrome:

Popup border

You can't change its shape / color, just like you can't change normal Chrome chrome (pun intended).

Manas Khandelwal
  • 3,790
  • 2
  • 11
  • 24
Xan
  • 74,770
  • 16
  • 179
  • 206
-3

There is one to make the popup.html border-radius that to add another Div container to popup HTML, set the body background to none and give the background color to the div container. After that, you can give the radius to the container.

e.g

body {
  background: none
}

.container {
  background: green;
  border-radius: 10px;
  width: 50%;
  height: 100px;
  text-align: center;
}
<body>
  <div class="container">
    The content is here....
  </div>
</body>
Manas Khandelwal
  • 3,790
  • 2
  • 11
  • 24
Bakhtiar Jallandhary
  • 1
  • 1
-4

Your supposed to style the html tag, not the body tag.

html {
    border: 5px solid rgb(200, 200, 200);
}
<!DOCTYPE html>
<html>
    <header>
        <link rel="stylesheet" href="popup.css">
    </header>
    <body>
    <h1>Hello World!</h1>
        <script src="popup.js"></script>
    </body>
</html>
AJ D
  • 9
  • 1
  • This doesn't actually work, although the problem in the question doesn't seem to have a solution either. Your `` tag is wrong, your example has `
    ` instead of ``. You should also put the `type="text/css"` attribute in the `` tag.
     – Rafael Mansilha Murta Oct 20 '22 at 23:22
  • OMG THANK YOU. I was searching all over the internet for this!!! – Ramsey Mar 31 '23 at 10:33