0

So when I say border - i mean as in border-bottom: 10px solid red - so I can make this no longer a rectangle, but a rounded rectangle?

.item {
border-bottom: 10px solid red;
width: 100%;
height: 50px;
float: left;
display: block;
}
<div class="item">This is a div</div>
dubbs
  • 1,167
  • 2
  • 13
  • 34

1 Answers1

0

Don't use a border on the element itself. You can't make just the bottom border into a rounded rectangle, using things like border-radius will only round the bottom corners of the bottom border.

Instead, use the ::after pseudo element:

.item {
  width: 100%;
  height: 50px;
  float: left;
  display: block;
  position: relative;
}

.item::after {
  content: " ";
  display: block;
  width: 100%;
  height: 10px;
  background: #f00;
  border-radius: 5px;
  position: absolute;
  bottom: 0;
}
<div class="item">This is a div</div>
user229044
  • 232,980
  • 40
  • 330
  • 338
  • Yeh - I've done this in most areas - but wanted to add a border to a table - so favoured using the actual border property. Is it not possible using the border property? – dubbs Feb 19 '22 at 11:26