Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make border radius in popup chrome extension?

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/

like image 669
dev.knockout Avatar asked Jan 12 '15 10:01

dev.knockout


People also ask

How do you code border radius?

CSS Syntaxborder-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.

Can I use CSS border radius?

You can give any element “rounded corners” by applying a border-radius through CSS. You'll only notice if there is a color change involved. For instance, if the element has a background-color or border that is different than the element it's above.

Why border radius is not working?

If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working. This answer worked for me.


1 Answers

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).

like image 65
Xan Avatar answered Sep 20 '22 22:09

Xan