Grow your CSS skills. Land your dream job.

border radius question

  • # November 12, 2012 at 2:05 pm

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

    # November 12, 2012 at 2:14 pm

    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/

    # November 12, 2012 at 2:17 pm

    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”

    # November 12, 2012 at 2:58 pm

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

    Is it some sort of ‘pie’shape.

    # November 12, 2012 at 4:21 pm

    @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.

    # November 12, 2012 at 4:36 pm

    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](http://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.

    # November 12, 2012 at 5:06 pm

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

    # November 12, 2012 at 5:23 pm

    @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

    # November 12, 2012 at 5:52 pm

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

    # November 12, 2012 at 7:32 pm

    @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

    # November 12, 2012 at 8:36 pm

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

    # November 13, 2012 at 1:21 am

    @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.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".