Possible to use border-radius together with a border-image which has a gradient?

by

This is possible, and it does not require extra markup, but uses an ::after pseudo-element.

                                   screenshot

It involves putting a pseudo-element with a gradient background below and clipping that. This works in all current browsers without vendor prefixes or hacks (even IE), but if you want to support vintage versions of IE, you should either consider solid color fallbacks, javascript, and/or custom MSIE CSS extensions (i.e., filter, CSSPie-like vector trickery, etc).

Here’s a live example (jsfiddle version):

@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css');

html {
    /* just for showing that background doesn't need to be solid */
    background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%);
    padding: 10px;
}

.grounded-radiants {
    position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    padding: 10px;
    /* just to show box-shadow still works fine */
    box-shadow: 0 3px 9px black, inset 0 0 9px white;
}

.grounded-radiants::after {
    position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: linear-gradient(red, blue);
    content: '';
    z-index: -1;
    border-radius: 16px;
}
<p class="grounded-radiants">
    Some text is here.<br/>
    There's even a line break!<br/>
    so cool.
</p>

The extra styling above is to show:

  • This works with any background
  • It works just fine with box-shadow, inset or not
  • Does not require you to add the shadow to the pseudo-element

Again, this works with IE, Firefox and Webkit/Blink browsers.

More Related Contents:

  1. how do I make device specific selectors in css [closed]
  2. Canvas is stretched when using CSS but normal with “width” / “height” properties
  3. Override body style for content in an iframe
  4. How to prevent Less from trying to compile CSS calc() properties?
  5. CSS3 background image transition
  6. Understanding z-index stacking order
  7. Why does the order of media queries matter in CSS?
  8. Truncating long strings with CSS: feasible yet?
  9. Is the CSS star selector considered harmful (and why)?
  10. CSS to set A4 paper size
  11. Vertically align text within a div [duplicate]
  12. Format text in a ?
  13. What is the best CSS Framework and are they worth the effort?
  14. What is difference between justify-self, justify-items and justify-content in CSS grid?
  15. Remove gutter space for a specific div only
  16. What do “flex” and “justify-content” achieve that “text-align” doesn’t?
  17. How to build a 2 Column (Fixed – Fluid) Layout with Twitter Bootstrap?
  18. Setting CSS top percent not working as expected
  19. css skew element and get inner rounded border top
  20. How can I select an nth child without knowing the parent element?
  21. Z-Index Relative or Absolute?
  22. How can I make a div span multiple rows and columns in a grid?
  23. What’s the difference between `all: unset` and `all: revert’
  24. Responsive Images with CSS
  25. rotate3d shorthand
  26. Styling the new twitter widget (embedded timeline)
  27. In a bootstrap responsive page how to center a div
  28. How to style the number on a html list?
  29. Horizontal scroll in DIV with many small DIV’s inside (no text)
  30. Creating a droplet like border effect in css

Leave a Comment