Rounded side, not rounded corners

by

Here is the jsfiddle: http://jsfiddle.net/swqZL/

CSS for element div with class “figure”:

.figure {
height: 400px;
width: 200px;
background-color: black;
border-bottom-left-radius: 100%30px;
border-bottom-right-radius: 100%30px;    
}

Horizontal radius 100%, vertical radius 30px

More Related Contents:

  1. How do CSS triangles work?
  2. Speech bubble with arrow
  3. Line before and after title over image [duplicate]
  4. Transparent text cut out of background
  5. CSS Only Pie Chart – How to add spacing/padding between slices?
  6. Control the dashed border stroke length and distance between strokes
  7. CSS transparent curved shape with two rounded sides
  8. How to draw a circle with text in the middle?
  9. CSS 3 Shape: “Inverse Circle” or “Cut Out Circle”
  10. Is it possible to create an angled corner in CSS?
  11. How to draw a circle sector in CSS?
  12. draw diagonal lines in div background with CSS
  13. How to make round corners to both inside of a box and its border?
  14. Outlining and partially filling an SVG Shape
  15. Hexagon shape with CSS3
  16. Is a concave border radius possible?
  17. Align text on slanted line
  18. background image, linear gradient jagged edged result needs to be smooth edged
  19. Circle with two borders
  20. Blocky gradient effect in CSS3
  21. Border within border CSS
  22. CSS rounded corners in IE8
  23. Half hexagon shape with one element
  24. How to create a radial menu in CSS?
  25. Arrow Box with CSS
  26. Transparent hollow or cut out shape in HTML
  27. Make CSS3 triangle with linear gradient
  28. Making jagged triangle border in CSS
  29. how to handle ‘double opacity’ of two overlapping divs
  30. How to create fluid trapezoid image with css?

Leave a Comment