Partial circular border using CSS

Question

I want to create a partial circular border around an element using pure css. I've been able to achieve the effect to a certain extent in this: http://jsfiddle.net/5MZMj/202/ However, this removes 25% or the border, How do I remove just 5% or say 20% ? Also, how do I rotate the border (without rotating the content inside)?

Code in jsfiddle:

HTML:

<div class="one">
    <div class="two">4.5</div>
</div>

CSS:

.two {
    font-size: 24px;
    display:inline;
    padding-bottom:5px;
}
.one {
    padding: 10px;
    border: 1px solid green;
    border-radius: 25px;
    border-top-color: transparent;
    width:30px;
    margin-left: 10px;
}

Edit: image to give an idea of the effect I'm trying to achieve: http://imgur.com/JU78ICT Edit2: sorry, I just realized I had linked the wrong jsfiddle, correct one is: http://jsfiddle.net/5MZMj/202/

Answer 1

Partially solved using psuedo elements, see: http://jsfiddle.net/5MZMj/205/

:after {
    display: inline-block;
    content: "";
    border-left: 10px solid transparent;
    border-top: 25px solid #fff;
    border-right: 10px solid transparent;
    border-top-color: #fff;
    position: absolute;
    margin-top:-42px;
    margin-left: -5px;
}

Editing margin-top, margin-left and border-right changes the amount of arc to be removed.

[There ought to be a better way though, someway in which editing a single variable changes the amout of arc to be removed]

Answer 2

I'm not sure if this is what you're looking for, but a simple hack is to put the upper right circle behind your main div:

#f {
  z-index: -1;
}

http://jsfiddle.net/5MZMj/199/

Answer 3

I didn't get you all, but may be this is the answer.

#f
{
    right:-93px;
}

http://jsfiddle.net/7zDNK/

Answer 4

You can specify the radius for each corner if that what you mean:

border-radius: 5px 10px 15px 20px;

Starting with the top-left corner and going clockwise.

Answer 5

If you want to take less of a chunk out of the corner, you need to adjust the positioning of the circle. http://jsfiddle.net/5MZMj/201/

#f {
    right: -85px;
    top: -85px;
}