How do I get a thin border in qtip with round corners?

Question

I try to get a thin border with round corners for the tip in qtip, using:

border: {width: 1, radius: 7, color: "#B8E25E"}

(Like explained here: http://craigsworks.com/projects/qtip/docs/tutorials#borders)

But the border is then getting quite thick, like 7 or something. Is there a way to get a thin border with round corners?

Answer 1

I had the same problem too - it looks like qtip 1.x will not let you use a 'radius' thats less than the border width.

It looks like this is by design, and you'll have to move to qtip 2 (which isn't released yet) to get round it.

See this conversation between the developer of qtip and a user:

User: I've played a little with this, and as far as I can detect it isn't possible to use a border-radius that is greater than the border-width. If I configure a border-radius that's greater than the border-width, the border-width displayed will be the same as the radius (in stead of what I configured).

Developer: Unfortunately this is neither a bug or feature, just an side effect of the implementation. There are no plans to implement this as 1.0 releases are now discontinued, and the border engine is removed in the 2.0 releases in favour of standard border-radius properties.

Answer 2

From briefly glancing at that documentation it looks like the Radius is the width of the border? So therefore your border is 7, maybe change it to {width: 1, radius: 2, color: "#B8E25E"} to get a thinner border?

Answer 3

From looking at the source code, I found this in the docs.css file:

#content .subsection{
      border-bottom: 3px solid #F1F1F1;
      margin-bottom: 15px;
      padding: 5px 0 40px;
   }

Try doing something similar to this and see what happens. Maybe saying border: 3px solid #F1F1F1; instead.

Here's the section where I found this at: http://craigsworks.com/projects/qtip/docs/tutorials#borders

Answer 4

Try this it will help you out

.corner { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }