How Can I Create Partial Box Borders in CSS?

Partial Box Borders in CSS

In CSS, it is not directly possible to create a box with a border that only extends partially across the box. However, a similar effect can be achieved with a clever workaround.

Creating a Partial Border

This technique involves creating a container div with the desired dimensions and background color. Within this div, a smaller pseudo-element is placed using the :after selector. This pseudo-element represents the partial border and is positioned and sized accordingly.

For example, to create a 350px wide box with a 60px wide border at the bottom, you can use the following CSS:

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}

This approach provides flexibility in terms of border size, position, and color. It also ensures graceful degradation if the pseudo-element is not supported by the browser, displaying a simple box without the partial border.

The above is the detailed content of How Can I Create Partial Box Borders in CSS?. For more information, please follow other related articles on the PHP Chinese website!