Develop Reference

Create inverted curved corners in CSS [duplicate]

I have a css code:
-moz-border-radius-topleft:50px;
I get the result:
Is there any possibilities to give like this:

Just to update this, it seems you can in multiple ways.
Lea Verou posted a solution
Here is mine using border-image
Using border image
html
<div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div>
css
div {
width: 200px;
border-width: 55px;
-moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
-webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
-o-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
margin: 50px auto;
}
Using radial gradient
Lea Verou's solution
html
<div class="inner-round"></div>
css
.inner-round {
background-image:
radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}

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.

You can also use and inline svg with a path element:
body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 10">
<path d="M9 1 V9 H1 V3 Q3 3 3 1" fill="#fff"/>
</svg>
In this example, I use a cubic bezier curve for the inverted round edge.
With this approach, you can also fill the shape with an image or gradient:
body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 6.7">
<defs>
<clipPath id="clip">
<path d="M9 1 V6.7 H1 V3 Q3 3 3 1" fill="#fff"/>
</clipPath>
</defs>
<image xlink:href="http://i.imgur.com/qi5FGET.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>

This can be done with a radial gradient.
div {
width: 20vw;
height: 20vw;
background: radial-gradient(circle at top left,transparent 4vw, darkblue 4.1vw);
}
<div></div>
Just for fun, additional inverted corners can be added by defining multiple backgrounds - one for each corner:
div {
width: 40vw;
height: 40vw;
position: relative;
background-color: darkblue;
--circle: radial-gradient(circle,white 8vw, darkblue 8.1vw);
}
div:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: var(--circle), var(--circle), var(--circle), var(--circle);
background-size: 18vw 18vw;
background-position: -40% -40%, 140% -40%, -40% 140%, 140% 140%;
background-repeat: no-repeat;
}
<div></div>

Update: There are a plethora of options available now. Check out one of the other answers.
Original answer:
Unfortunately, there is currently not a solution based on official or implemented CSS Specs :(
However, as other people have added, there are possible solutions (or cheats?) you can do to achieve the same effect using JS libraries or complex HTML/CSS implementations. I came across this issue whilst looking for a way to make even more complex corners than the OP without using images.
I have filed a bug (Feature Request) over at the webkit site - as there does not appear to be one filed already.
Bug 62458 - Feature Request: Inverse rounded corners

For a plain background-color, you actually can, using pseudo element and box shadow to draw background-color instead, and it will not hide backgrounds of parent's container, you will actually see them through.
What you need is a browser that understands :before/:after and box-shadow :) ...
For IE8 , you can draw hudge borders instead shadows. http://codepen.io/anon/pen/fFgDo
box-shadow approach : http://codepen.io/anon/pen/FwLnd
div {
margin:2em; /* keep it away from sides to see result */
padding:2em;/* for test to size it when empty */
position:relative; /* reference to set pseudo element where you wish */
overflow:hidden;/* you do not want the box-shadow all over the page */
}
div:before {
content:'';
position:absolute;
width:80px;
height:80px;
top:-40px;
left:-40px;
border-radius:100%;
box-shadow:0 0 0 2000px #1D005D;/* here draw the shadow inside its parent , maybe z-index will be required for content */
}
pseudo element can take any shape, and transform via css and set any where in its element to draw kind of holes through : examples : http://codepen.io/gc-nomade/pen/nKAka

I made an online generator to easily get the code of any combination you want: https://css-generators.com/custom-corners/
A few examples:
.one {
--mask: radial-gradient(40px at 40px 40px,#0000 98%,#000) -40px -40px;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.two {
--mask:
radial-gradient(40px at 0 0,#0000 98%,#000) 0/51% 100% no-repeat,
radial-gradient(40px at 100% 100%,#0000 98%,#000) 100%/51% 100% no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.three {
--mask:
radial-gradient(60px at 60px 60px,#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000) -60px -60px,
linear-gradient(90deg,#000 20px,#0000 0) -10px 50% /100% calc(100% - 120px + 10px) repeat-x,
linear-gradient( #000 20px,#0000 0) 50% -10px/calc(100% - 120px + 10px) 100% repeat-y;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.four {
--mask: radial-gradient(60px at 0 0,#0000 98%,#000);
-webkit-mask: var(--mask);
mask: var(--mask);
}
.five {
--mask:
radial-gradient(60px at 100% 0,#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000),
conic-gradient(from 90deg at 10px 10px,#0000 25%,#000 0) 0 0/calc(100% - 60px + 10px) 100% repeat-y,
conic-gradient(at bottom 10px right 10px,#000 75%,#0000 0) 0 100%/100% calc(100% - 60px + 10px) repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.box {
width: 150px;
aspect-ratio:1;
display:inline-block;
background:linear-gradient(red,blue);
}
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>

There are ways you could solve this issue by using just CSS - however it would depend on the colour of your background (if solid its easier) if you have a pattern for background it might be slightly more complex.
I cover a basic example here of how to make an Inverse Border Radius in CSS (here). This uses a trick with the size of Border to use the inside, you might have to do some positioning to get it to work properly however as you can see its possible. Especially if you specify a background-color for each span.
If you want all 4 corners you would have to add a separate class for each span inside your div, and each class would simulate a corner, top left, top right etc.

No.
If you have solid background you can probably use css to create the bite.
Otherwise, there isn't anything special you can do beyong using PNGs, much like you'd create round corners before border-radius.

actually there's one way, like this:
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>
but as #Domenic says you'll need a solid background, otherwise you'll get this:
<div style=" background-color:#666">
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>

Responsive Skewed Div with background image

I am attempting to make a page where the screen is split in half with two images from the bottom right corner to the top left corner
I have done this in CSS using transform: skewY( x amount deg);
I can then change this with javascript when the page loads by calculating the degree needed via trigonometry like so
var hlc = document.getElementById('homeleftside');
var hlch = hlc.clientHeight;
var hlcw = hlc.clientWidth;
var hlct = Math.atan(hlch/hlcw);
var hlca = hlct * 180 / Math.PI;
and I can do this via javascript every time the page is resized,
but to make this in CSS I have made these classes below and was wondering if there is a better alternative to a responsive degree amount depending on the page size due to editing the pseudo:: after element.
.homeleftside::after {
transform-origin: top left;
transform: skewY(-29deg);
content: '';
height: 100%;
width: 100%;
background: url("graphics/architecture.jpg");
color: #fff;
position:absolute;
top: 0px;
left: 0px;
z-index: 1;
overflow: hidden;
}
.homeleftside {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
transform-origin: top left;
transform: skewY(29deg);
}

As far as I know, your only posibility is with a mask-image.
Support is not fully, but it gives an easy way to achieve it.
Note that the direction "top left" (and similars) for a gradient will get you always the diagonal of the element
.test {
background-image: linear-gradient(red, green);
-webkit-mask-image: linear-gradient(to top right, black 50%, transparent 50%);
mask-image: linear-gradient(to top right, black 50%, transparent 50%);
}
#test1 {
width: 300px;
height: 200px;
}
#test2 {
width: 200px;
height: 200px;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>

You can easily achieve this using clip-path
body {
margin:0;
height:100vh;
background:url(https://picsum.photos/id/10/800/800) center/cover;
}
body:before {
content:"";
display:block;
height:100%;
background:url(https://picsum.photos/id/18/800/800) center/cover;
-webkit-clip-path:polygon(0 0,0 100%,100% 100%);
clip-path:polygon(0 0,0 100%,100% 100%);
}

Making border-image work with gradients

I'm working on a webapp that uses react.js and sass for styles (so all my style files are .scss). I have a textbox with the current style:
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
}
At some point, my app wants to change the border colour. This is what I have for that:
var borderStyle;
if (gradient) {
borderStyle = {
'borderImage': '-webkit-linear-gradient(left, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
};
}
Later, the input component:
<input type="text" style={borderStyle} onChange={this.handleChange} />
Currently what I see is a white border with a tiny image of the red-blue gradient in each corner of the border. I've tried using borderColor, which doesn't work with gradients at all, apparently. Am I missing something obvious, or is it not possible to do a simple border gradient?
The desired result is a left-to-right gradient (so the left border is entirely blue, the right is entirely red, and the top and bottom borders feature the blue-to-red transition).
In response to Harry's answer, I changed to the following code:
if (gradient) {
borderStyle = {
borderImage: 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
borderImageSlice: 1
};
}
as specified in the react docs for inline styles.
However when I inspect the element, the borderImageSlice property I've defined is missing; only the borderImage one is there, and I still only have tiny gradients in the corners of the border.

You need to add a border-image-slice property also while applying the border. Doing this would give the exact output as you need.
I have added it via CSS itself in the below snippet (without the JS) but you should be able to adapt it :)
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
border-image: linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%);
border-image-slice: 1;
}
<input type="text" />
Note: I have also modified the gradient syntax to use the standard one so that it works in all browsers that support border-image property.
Below is a snippet which applies the border image when the text in the input box is changed.
var ip = document.getElementById("inp");
ip.addEventListener("change", function() {
this.style.borderImage = 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)';
this.style.borderImageSlice = '1';
});
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
}
<input type="text" id="inp" />
It seems like ReactJS by default adds px as units to all numbers that are passed for inline styles and because of this the border-image-slice: 1 is wrongly getting set as border-image-slice: 1px. As this property is a unitless property in CSS, it is not getting applied properly. The solution is to wrap this value within quotes and also add a semi-colon within the quotes (like in the below code sample):
var borderStyle = {
borderImage: 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
borderImageSlice: '1;' // note the quotes and the semi-colon.
};
Big credits for finding out this problem goes to Henrik Andersson.
JSBin Demo with ReactJS

I managed to fix such problem by adding 1 / 1 / 0 stretch by myself to the inline-style so it looks like this:
var borderImage = `linear-gradient(to right, #1A80AC 0%, #1A80AC ${position.x / 3}%,
#8798AD ${ position.x / 3 }%, #8798AD 100%) 1 / 1 / 0 stretch`

How to give two alternate background images?

css code
body {
background-color: rgb(224,224,224,0.6);
background: url(../img/backlogo.png),url(../img/backlogo2.png);
}
I want to give two background images one after the other alternately.I have shown the output in the . I want the two images repeated one next to other.

Try something like this
body {
background-color: rgb(224, 224, 224, 0.6);
background: url(https://upload.wikimedia.org/wikipedia/commons/c/c3/Acid2.png), url(http://easycarkeys.com/images/accept.png);
background-repeat: no-repeat, no-repeat;
background-position: right center, left center;
height:250px;
}
Ref : Using CSS multiple backgrounds
UPDATE : To avoid overflow set background position based the width and height of other background image
body {
background-color: rgb(224, 224, 224, 0.6);
background: url(https://upload.wikimedia.org/wikipedia/commons/c/c3/Acid2.png), url(http://easycarkeys.com/images/accept.png);
background-repeat: no-repeat, no-repeat;
background-position: 200px center,left center;
height:250px;
}

Try Something like,
body {
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
Multiple Background

CSS3 allows this sort of thing and it looks like this:
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
The current versions of all the major browsers now support it, however
if you need to support IE8 or below, then the best way you can work
around it is to have extra divs:
<body>
<div id="bgTopDiv">
content here
</div>
</body>
body{
background-image: url(images/bg.png);
}
#bgTopDiv{
background-image: url(images/bgTop.png);
background-repeat: repeat-x;
}

Here is the working demo.
You gotta give background-position to stack the background image
body {
background:
url(http://s3-media1.fl.yelpcdn.com/bphoto/y2kT6dH4XBt3hJoTsOeHKA/ls.jpg) no-repeat top right,
url(http://s3-media1.fl.yelpcdn.com/bphoto/lcBBwRuHvzHIVI6tors32A/ls.jpg) no-repeat top left;
}
<body></body>

This works wonders for me:
body {
background: url("images/bgInit1C.gif") no-repeat scroll 0px 0% transparent url("images/bgInit1Repeat.gif") repeat-y scroll 0px 0px;
}
With this code, the two images overlap, but you can change their x y values for different positioning.

Here is an example making multiple background images using css, CSS3 Backgrounds
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}

#sample1 {
background-image: url(image/sample1.gif), url(image/samplle2.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}

How to change the CSS in td on mouse click using JavaScript

Using JavaScript, I am trying to load CSS (id) on click of a td.
In the above picture, I made main account holder in one td and authorised reporter in another td. Main account holder tab should load while onload. What I required is while clicking the authorised reporters tab the CSS for main account holder and authorised reporter should change. i.e., background for main account holder should apply in authorised reporter place and vice versa.
.css ids are:
#account_holder{
background: url('{{ STATIC_URL }}images/main-account-holder.png')no-repeat;
background-size:100%;-moz-background-size: cover;
background-size: cover;-o-background-size: cover;
-webkit-background-size: cover;
}
#authorised_reportericon{
background: url('{{ STATIC_URL }}images/authorised_reporter-icon.png')no-repeat;
background-size:100%;
-moz-background-size: cover;
background-size: cover;-webkit-background-size: cover;-o-background-size: cover;
background-color:#F0F0F0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#account_holdericon{
background: url('{{ STATIC_URL }}images/main-account-holder-icon.png')no-repeat;
background-size:100%;
-moz-background-size: cover;
background-size: cover;
}
#authorised_reporter{
background: url('{{ STATIC_URL }}images/authorised_reporter.png')no-repeat;background-size:100%;
-moz-background-size: cover;
background-size: cover;
background-color:#F0F0F0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
Using JavaScript I want to change the CSS ids while performing onclick. I don't know how to code in JavaScript. Can any one guide me how to code that?

IDs should be unique. Don't change them. Use classes instead
in Css replace the # to . like the following:
.account_holder{
background: url('{{ STATIC_URL }}images/main-account-holder.png')no-repeat;
background-size:100%;-moz-background-size: cover;
background-size: cover;-o-background-size: cover;
-webkit-background-size: cover;
}
Here is how to change the class name of an element using javascript:
EDIT:
var your_element = document.getElementById('your_element_id');
your_element.onclick = function(){
this.className = 'account_holder';
};

you should use both mouseenter and mouseout event states if using jquery or use hover