border-image with border-radius

[RonaldGJ]

Beste mensen,

Is er hier iemand die een goede oplossing heeft om een element een border-radius van 100% te geven, maar ook een border-gradient van beneden naar boven?
Ik heb gelezen dat daar een soort van bug in zit en dat dit niet wil, maar misschien is er hier iemand met een oplossing?

Alvast bedankt,
Gr. Ronald!

 

[csshunter]

Hoi Ronald,
Je wilt dus een ovale of ronde <div> (vanwege de border-radius van 100%), met een border waarin een verloop zit?

De browser-ondersteuning van een border-gradient schijnt inderdaad niet om wakker van te liggen, maar met een image met de gradiënt als background-image plus een er overheen geplakte binnen-div kan je een heel eind komen:

• Test: border-radius-gradient.htm
  
  
• Gebruikt image: border-radius-gradient.png
• Voor IE8 en eerder moet css3pie worden toegevoegd, anders gaat de border-radius de mist in. Voor het mooi kan je die nog in een Conditional Comment zetten, dan lijdt de css-validator geen schade.

 

[RonaldGJ]

Hartelijk dank voor je reactie!

Ik denk inderdaad dat dit de oplossing zal worden. Jammer dat hier nog niet echt een goed oplossing voor is, alleen met CSS.
Bedankt ook even voor het voorbeeld, duidelijk!

Gr. Ronald!