Welcome to Gaia! ::


Not even gold and silver can


All right, so I was using the border properties inset and outset with border-radius, shown upon hovering over certain links on my profile. The problem is that it doesn't seem to show up on Chrome; in fact, Chrome seems to show the borders as solid instead of inset/outset. To my knowledge, I don't think it's necessary for any webkit prefixes to be added to the border property. However, I looked online about this and it seems that Chrome had some problems in the past regarding the use of border-radius and inset/outset borders at the same time, though supposedly they should be resolved. I don't suppose anyone knows what's going on?

Some coding:

#id_custom_28637 {background: green; width: 154px; height: 154px; border-radius: 50%; border: 3px inset transparent; transition: border 0.7s}
#id_custom_28637:hover {border: 3px outset black}


break the two of us...

reinasachiko's Senpai

Dramatic Gentleman

23,715 Points
  • Fan Before It Was Cool 500
  • Nuclear Plant 500
  • Rat Conqueror 500
it actually works, but not on every color. This is due to formula used to calculate the secondary border color varies between browser to browser.

In Chrome this is kinda problematic since Chrome converts the color to RGB(a) numbers then just negatively reduce the color value by a flat amount, this renders colors below values of 100~110 to be calculated as 0 in secondary color. resulting in rgb 0,0,0 to 100,100,100 will have just black (0,0,0) secondary color.

While in Firefox, the counting is done more properly y counting the differentiation to 0,0,0 and 255,255,255 then some fuzzy stuffs.

My suggestion: Use colors above rgb 150,150,150 at least.

The better workaround is simply by using solid style but with four color shorthand code. It allows consistent appearance on all browsers too, example:

#selector {
border: 5px solid;
border-color:red blue blue red;
}
Fredy-san

Oh, that's weird. Thank you for the tip! I'll use it.

Quick Reply

Submit
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games
Mini-Games
Play with GCash
Play with Platinum