border radius question

[ciampam9]

Is it possible to create corners that are cut at 45degrees rather than the round “border-radius”? Any direction would help, thank you.

[JohnMotylJr]

You can use percentages:

div {

height:300px;

width:300px;

margin:25px;

border:2px solid black;

border-radius:45% 30px;

}

http://jsfiddle.net/john_motyl/G6cCD/

[ciampam9]

thank you but I may have described it a little weird. I understand percentages with border-radius but is it possible for there to be an edge. like the edge of this “Y”

[Paulie_D]

I still don’t get what it is you are trying to achieve.

Is it some sort of ‘pie’shape.

[JohnMotylJr]

@ciampam9, why don’t you do a super quick mockup (photoshop, paint) what you want so we know lol.. Because with that “Y” i’m thinking (obtuse angle from the bottom to top right of the Y, v shape within the top of Y, the bend the the Y’s right arm takes extending out and back in). I could go on all day but i would start to not know what i’m talking about.

[ben_boomer]

I think I sort of understand what you are trying to do, but I don’t know how to…. BUT, here is a page with various shapes created solely using CSS [Here](https://css-tricks.com/examples/ShapesOfCSS/ “HERE”). Could probably tweak around with one of those listed in there to get an idea of how radius works.

[joshuanhibbert]

You can get a similar effect using background images: http://jsfiddle.net/joshnh/sM3T9/

[wolfcry911]

@joshuanhibbert, I had a similar example in a pen, but I just noticed it, and your example as well, no longer work in Firefox. I know they were working in the past… :(
FF 16.0.2/Mac OS X 10.8.2

edit// I just learned it’s the last (spec) css3 background throwing it off, while the browser prefix background works

[joshuanhibbert]

@wolfcry911 Good spot. I’ve fixed the code.

[ciampam9]

@joshuanhibbert you hit the nail on the head. thank you very much!!! I’m currently doing a markup based off a clients new catalog. Round corners aren’t going to cut it and I would rather not use images if I didn’t have to. Much appreciated.

/end fragment

[JohnMotylJr]

@ciampam9, if you dont mind me asking, do you have a contingency with getting rounded corners to work in bad naughty browsers (ie)

[ciampam9]

@JohnMotylJr javascript if I have to. They know the problems with IE, thank god, and are pretty understanding with the fact that not everything is compatible.

[Author]

Posts