It is required to make a block in which only the two upper corners are curled. Rounded not evenly. Say 20px horizontally, 50 vertically. In this case, these values ​​are specified through slash.

Works: non-uniform coordination for all angles at once:

border-radius: 20px/50px;

Does not work: uneven skrgulenie upper corners in the general record:

 border-radius: 20px/50px 20px/50px 0 0;

Does not work: uneven skrgulenie upper corners in the individual for each record:

 border-top-left-radius: 20px/50px; border-top-right-radius: 20px/50px;

jsFiddel sketch

Tell me, please, what am I doing wrong?

1 answer 1

You have the wrong syntax.

Right like this: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? ( W3C ).

Result (for clarity increased):

 div, p, span { width: 350px; height: 350px; background: purple; margin: 20px; display: block; } div { border-radius: 40px 40px 0 0 / 100px 100px 0 0; } 
 <div></div>

  • Clear. Thanks :) - Cypher