Question

I’m using CSS to redesign QFrame. Here’s the CSS code:

border: 5px dashed #555;

Here’s the image example:

Is there a way to make the corners of the dotted border connect to make a solid line?

Answer 1

I’m not sure QFrame accepts full CSS code, but you can try

border-top : 5px dashed #555;
border-bottom : 5px dashed #555;
border-left : 5px solid #555;
border-right: 5px solid #555;

I hope it do the work.

Here is a JS Fiddle to show it up.

http://jsfiddle.net/qxupJ/1/

edit : Well, in this case you will have to use 4 divs inside your frame, each one with a background image that corresponds to it’s corner.

edit 2 : I got an idea !

here is the fiddle explaining my new idea:

http://jsfiddle.net/7L5A9/

basicly it’s a 4 divs for each corner, with it’s “border solid” in a absolute position.

I know it look pretty ugly, but I think it’s the only way to do it without using images, else, if your container size will not change, then I think you can use a background-image in the main container (QFrame).

Hope it helps you.