CODEWITHSUNDEEP
csshtmlsasscss-selectors
krish
krish

Reputation: 489

HTML border without padding, or custom length border for the element

How can I add a border to a DIV which should have a smaller width than the element? Like so:

Border width set

Currently I have:

Column-1

border-bottom: 1px solid grey;

Column-2

border-left: 1px solid grey;
border-bottom: 1px solid grey;

Column-3

border: none;

Column-4

border-left: 1px solid grey;

4columns with border

I want the borders not to occupy the div padding space, like so:

wanted result

Upvotes: 1

Views: 5022

Answers (3)

Arshiya Khanam
Arshiya Khanam

Reputation: 613

.row1 {
  padding: 100px 100px 100px;
  display: flex;
}
.Column-1 {
  background-color: #00FFFF;
  width: 300px;
  height: 150px;
  border-bottom: 1px solid grey;
}
.Column-2 {
  background-color: #00FFFF;
  width: 300px;
  height: 150px;
  border-left: 1px solid grey;
  border-bottom: 1px solid grey;
  margin-left: 10px;
}
.row2 {
  padding: 0 100px 0;
  display: flex;
}
.Column-3 {
  background-color: #00FFFF;
  width: 300px;
  height: 150px;
  border: none;
}
.Column-4 {
  background-color: #00FFFF;
  width: 300px;
  height: 150px;
  border-left: 1px solid grey;
  margin-left: 10px;
}
<div class="row1">
  <div class="Column-1"></div>
  <div class="Column-2"></div>
</div>
<div class="row2">
  <div class="Column-3"></div>
  <div class="Column-4"></div>
</div>

Please check this code.

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 193002

You can achieve this effect using two linear-gradients - one for the top/bottom borders, and one for the left/right borders:

.clipped-border {
  padding: 0 0.2em;
  background: 
    linear-gradient(to bottom, 
      red 4px, 
      transparent 4px, 
      transparent calc(100% - 4px), 
      red calc(100% - 4px)
    ),
    linear-gradient(to right, 
      red 5px, 
      transparent 5px, 
      transparent calc(100% - 4px), 
      red calc(100% - 4px)
    );
  background-size: 95% 100%, 100% 50%;
  background-repeat: no-repeat;
  background-position: center;
}
<h1 class="clipped-border">
  A heading with a solid red border
</h1>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273990

You can try gradient like this:

h1 {
  padding: 5px;
  background:
    linear-gradient(red,red) top center/calc(100% - 15px) 5px,
    linear-gradient(red,red) bottom center/calc(100% - 15px) 5px,
    linear-gradient(red,red) left center/5px calc(100% - 15px),
    linear-gradient(red,red) right center/5px calc(100% - 15px);
  background-repeat: no-repeat;
  display:inline-block;
}
<h1>
  A heading title
</h1>

You can introduce CSS variable to make it easy to handle:

h1 {
  padding: var(--p,5px);
  margin:10px;
  background:
    linear-gradient(red,red) top center/calc(100% - var(--d,10px)) var(--p,5px),
    linear-gradient(red,red) bottom center/calc(100% - var(--d,10px)) var(--p,5px),
    linear-gradient(red,red) left center/var(--p,5px) calc(100% - var(--d,10px)),
    linear-gradient(red,red) right center/var(--p,5px) calc(100% - var(--d,10px));
  background-repeat: no-repeat;
  display:inline-block;
}
<h1>
  A heading title
</h1>

<h1 style="--p:10px;--d:20px">
  A heading title
</h1>
<h1 style="--d:30px">
  A heading title
</h1>
<h1 style="--d:0px">
  A heading title
</h1>

Upvotes: 0

Related Questions