How Can I Create Partial Borders for Boxes Using CSS?

Creating Partial Borders for Boxes in CSS

In CSS, it's not possible to directly declare box borders with specific sizes or partial coverage. However, there is an alternative approach that effectively recreates this effect:

Solution:

Create a regular CSS border for the box, and add a child element positioned with CSS to extend the border to the desired length. Here's an example:

.box {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
  border: 1px solid black;
}

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

HTML:

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

This code creates a box with a regular black border, and an additional 60px long, gray bar at the bottom, effectively simulating a partial border. This technique degrades gracefully in older browsers that don't support CSS positioning.

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