CODEWITHSUNDEEP
htmlcssborder
learningtech
learningtech

Reputation: 33725

css border-width percentage

I have one div wrapping another like so

<div id="container"><div id="box"></div></div>

Let's say the container has a dimension 100px by 100px. I want to box to have 0px height and 0px width. However, I want the left border of the box to fill up 50% of the container, and the right border of the box to fill up the the other 50% of the container.

How do I do this with css?

Upvotes: 6

Views: 19812

Answers (3)

user2906688
user2906688

Reputation:

Just change px to vw like

border-width: 10px;

to

border-width: 10vw;

Its do whats percentage do....

Upvotes: 2

joshnh
joshnh

Reputation: 8734

You can do what you are after, but using linear-gradients instead of borders.

Use the following markup:

<div class="box"></div>​

And the following styles (example: http://jsfiddle.net/HxbnK/):

.box {
    background-image: linear-gradient(154deg, red 50%, transparent 50%),
                      linear-gradient(26deg, red 50%, transparent 50%);
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 50% 100%;
    height: 100px;
    width: 100px;
}​

Just keep in mind that the .box element needs to be a square for this to work correctly.

Upvotes: 11

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324790

Short of manually calculating and specifying 50px as the border width, you can't. The border-width property only accepts lengths or the keywords thin, medium and thick.

As Saad Imran suggests, you might be able to just use two divs with 50% width each.

Upvotes: 0

Related Questions