Border Gradient with Border Radius

2021: If you want transparency, I recommend using the CSS mask method since the support is pretty good now You cannot use border-radius with gradient. Here is another idea where you can rely on multiple background and adjust the background-clip: .white-grad { background: linear-gradient(#ccc 0 0) padding-box, /*this is your grey background*/ linear-gradient(to right, #9c20aa, …

Read more

Invert rounded corner in CSS?

In modern browsers, you can use mask-image: #aux-container { width: 100px; height: 100px; background: #f00; -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px); } <div id=”aux-container”></div> http://jsbin.com/eViJexO/1/ Additionally, take a look at http://www.html5rocks.com/en/tutorials/masking/adobe/, which describes how to achieve similar result using mask-box-image.

css border-left 50% height

A sort-of similar but different approach to @Pekka’s: use the :after pseudo-selector, like so: .mybox { position: relative; padding: 10px 20px; background-color: #EEEEEE; } .mybox:after { content: ”; position: absolute; bottom: 0px; left: 25%; width: 50%; border-bottom: 1px solid #0000CC; } <div class=”mybox”> Le content de box. </div> …and a jsFiddle for good measure.