CODEWITHSUNDEEP
c++cssqtborder
Ivan Akulov
Ivan Akulov

Reputation: 4323

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?

Upvotes: 3

Views: 236

Answers (2)

Ricardo Fiorani
Ricardo Fiorani

Reputation: 782

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.

Upvotes: 3

ixron
ixron

Reputation: 127

There is not a way to achive the desired effect with out using an img for the corners. You can try using dotted or smaller sized dashes for a cleaner effect.

Upvotes: 1

Related Questions