How Can I Create Percentage-Based CSS Borders Using Only CSS?

CSS Borders: Setting Thickness in Percentages: A CSS-Only Approach

Although CSS borders do not natively support percentages, there is a clever CSS-only solution for achieving this effect.

Wrapper Element Magic

To simulate percentage borders, use a wrapper element with the following properties:

1. Background color: Set the wrapper element's background color to the desired border color.
2. Padding: Set the wrapper element's padding in percentages to create the border width illusion.
3. Element background color: Set the background color of the element within the wrapper to the desired color (transparent or otherwise).

Example Code:

To demonstrate, here's HTML and CSS code to create an element with 25% width side "borders":

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;
}

This technique mimics percentage borders by using padding on a wrapper element to create the illusion.

The above is the detailed content of How Can I Create Percentage-Based CSS Borders Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!