How to get angled corner like this in CSS, it's not round?


Tags: css,css3

Problem :

How to get angled corner like this in CSS, it's not round?

I tried with for left side (Example) but it's not giving the same effect

border-bottom-left-radius: 12px;
    border-top-left-radius: 3px;

enter image description here



Solution :

This is a perfect page for your question - it explains in detail (with photos too) how to get different curves using different CSS, including one like your question's pic:

http://www.css3.info/preview/rounded-border/

The one that looks most like yours (imo) is:

#Example_C {
    height: 65px;
    width:160px;
    -moz-border-radius-bottomright: 25px 50px;
    border-bottom-right-radius: 25px 50px;
}

    CSS Howto..

    Javascript jQuery only shows Image element once in IE. FF works

    How to change the slide picture when resize browser size

    How to make pure css floating tooltips (absolutely positioned span) dynamically resize to accommodate text

    How to apply CSS to a DialogBox using ClientBundle?

    How to see the print media CSS in Firebug?

    CSS: show only the last x items in a list

    How to check if a css/js resource is included in head

    How to apply nested css using jQuery?

    How to indent text exactly one character width

    how to set a div to the bottom side in asp.net css

    how to get double border in using CSS?

    JS/JQuery: How to switch class several times in a loop way?

    CSS background with image and gradient, how to write in multiple lines ?

    How to lay down elements vertically from top to bottom, and then from right to left, using a clean HTML markup?

    How to move an entire group of objects with Javascript

    how to make NGINX serve static content like .js, .css, .html?

    How does the arrival of HTML5 and CSS3 affect jQuery?

    How to style a is both open and closed?

    How to use CSS to surround a number with a circle?

    How to make html list scrollable downwards on fullscreen page?

    How to call
  • tag CSS
  • How should I create a web interface for my application? [closed]

    How generate width html element to fill rest of width window

    Clickable dropdowns - How do they work?

    Jquery Mobile CSS Android Styling Boarders Not Showing On Button