Search code examples
c++cssqtborder

How to make corners displaying correctly (look at image inside)?

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

border: 5px dashed #555;

Here's the image example:

Problem corners

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

Solution

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