Weird effect when applying transparent border over an element with a gradient background

by

That’s because the starting and ending points of the gradient are at the edges of the padding-box and border is rendered outside the padding-box. So, the borders look funny because the background is repeated on each side outside the padding-box to cover the border-box.

The box-shadow:inset is rendered inside the padding-box (just like background) and gives visually the same effect as a border, so you could try using that in place of border:

box-shadow: inset 0 0 0 10px rgba(0,0,0,0.2);
padding: 10px;

Because a box-shadow doesn’t take up any space, you need to increase your padding accordingly.

Illustration of padding-box and border-box:
enter image description here

Demo http://jsfiddle.net/ilpo/fzndodgx/5/

More Related Contents:

  1. How to create a curve between two gradient using CSS?
  2. Animating Linear Gradient using CSS
  3. How to add border to a container with transparent gaps in between
  4. How to Animate Gradients using CSS
  5. Freeze the top row for an html table only (Fixed Table Header Scrolling)
  6. Thick underline behind text
  7. Favicon not showing up in Google Chrome [duplicate]
  8. Apply CSS styles to an element depending on its child elements [duplicate]
  9. Space between nowrap inline blocks [duplicate]
  10. Difference between Width:100% and width:100vw?
  11. CSS background image alt attribute
  12. 3 column layout HTML/CSS
  13. How do I remove the blue styling of telephone numbers on iPhone/iOS?
  14. Font Rendering / Line-Height Issue on Mac/PC (outside of element)
  15. HTML5 / CSS3 Circle with Partial Border
  16. Why are dashes preferred for CSS selectors / HTML attributes?
  17. Table tbody scroll in IE8
  18. How can I prevent the scrollbar overlaying content in IE10?
  19. How to center-align one flex item and right-align another using Flexbox [duplicate]
  20. CSS3 border-radius clipping issues
  21. When I try to shift the image upwards using negative margin the whole container is moved upwards
  22. CSS transform origin issue on svg sub-element
  23. transition for background-image in firefox?
  24. CSS Layout 2-Column fixed-fluid [closed]
  25. Create a Reverse Clip-Path – CSS or SVG
  26. click link below a higher z-index div [duplicate]
  27. Img’s max-height not respecting parent’s dimensions
  28. backdrop-filter not working for nested elements in Chrome
  29. Fitting child into parent
  30. How to play CSS3 transitions in a loop?

Leave a Comment