Question

I noticed that every browser renders the border-style: inset; property differently, so I had two questions:

1. Why do the browsers render it differently? How can there be so many different algorithms for this? Most of all, some browsers look wrong with it!

2. Since I can’t rely on the inset attribute working, I was wondering what the proper “algorithm” is? I typically go 16 lighter on top/left and 16 darker on bottom/right (ie. #666666 is the background, so #767676 is the top/left and #565656 is the bottom/right)

I need to know what to use (generally speaking) because I’m having trouble making my styles inset, and I clearly can’t use the inset properly so I have to manually change the colors. Sometimes, however, it just doesn’t look right (if it’s too dark). There has to be a good algorithm out there for this?

I’ve looked for web resources on the issue (such as a “what colors your borders need to be to make this look inset!” tool) or anything that could help, and found nothing.

Think of it this way: If someone were making something in a paint program and didn’t have an inset effects button, what colors would all four of their borders be, given the main color is _____?

There HAS to be a general algorithm for this that I can’t find…

Edit: I want to point back to my example of using a paint program that needed an inset style. Can someone give me an example of what they’d use for this? (Is this part of the question better directs on the designers stack?)

Answer 1

Quote: “1. Why do the browsers render it differently?”

I’m sure each browser does it differently because they think theirs looks best. IE probably does it to look good in Windows. Safari is making theirs consistent with the look of Mac OS. Firefox in keeping with that browser’s other elements, etc. (and like stated by thirtydot, it has not been standardized.)

Quote: “2. Since I can’t rely on the inset attribute working, I was wondering what the proper ‘algorithm’ is?”

You could try to reverse engineer it if it’s that important. Setup a test page and call it up in a browser. Use an eye-dropper/color-picker utility to pick off the various colors. With enough samples, you should be able to find a pattern for that one browser.

Quote: “There HAS to be a general algorithm for this that I can’t find…”

Not if every browser does it differently. Each will have their own algorithm.

---

EDIT to address OP’s follow-up:

Quote: “Edit: I want to point back to my example of using a paint program that needed an inset style. Can someone give me an example of what they’d use for this? (Is this part of the question better directs on the designers stack?)”

You seem to be looking for one specific answer where one does not exist. I cannot give you an example of what I’d use since modern graphics programs (Photoshop) will do this for me and then give me enough options that, when combined, literally provide millions of results; border color, highlight color, shadow color, depth, angle, thickness, profile, etc. Ask 20 people what they think is the “perfect” inset and you’ll get 20 different answers (opinions really) and then we’re back to the reason it looks different in each browser (see #1 above). So yes, in the context of “programming” questions, this last part of your OP is probably off-topic.

Additional Random Thoughts:

Why is border-style not Standardized? IMHO, I’m thinking this property is simply not used enough to warrant any major effort to Standardize or perhaps there is much disagreement on this in the Standards community. I imagine that all the CSS properties requiring Standardization are prioritized in some fashion (popularity, usefulness?) and this one just didn’t yet make the cut or bring everyone together. Personally, I think a property like this is tied too closely to ever-changing trends. i.e. – 10 years ago, we used to see to see lots of tables with very thick “embossed” borders. These days, many designs use few borders or very thin borders, if any. Again, this is only a matter of taste and opinion.