Can CSS Borders Be Specified in Percentages?

CSS Border Thickness in Percentages: Is It Possible?

Question:

While trying to create an element with borders that cover a specified percentage of the browser window, you attempted using border-width:10%;, but it failed. Is there a way to set border thickness in CSS using percentages?

Answer:

Border doesn't support percentage... but it's still possible...

According to CSS specifications, percentages are not supported for border widths:

border-width

Value

Percentages

border-top-width

`

inherit`

border-width	Value	Percentages
border-top-width	`	inherit`	N/A

N/A

Non-scripted solution:

Since CSS borders do not support percentages, consider using a wrapper element to simulate borders:

1. Set the wrapper's background-color to your desired border color.
2. Use padding with percentages on the wrapper element, instead of border-width.
3. Set the element's background-color to your desired content color.

This technique simulates percentage borders using padding.

Example:

To create 25% width side borders using this approach:

HTML:

<div class="faux-borders">
  <div class="content">
    This is the element to have percentage borders.
  </div>
</div>

CSS:

.faux-borders {
    background-color: #f00;
    padding: 1px 25%; /* set padding to simulate border */
}
.content {
    background-color: #fff;
}

The above is the detailed content of Can CSS Borders Be Specified in Percentages?. For more information, please follow other related articles on the PHP Chinese website!