0

enter image description here

I'd like to design something like this with CSS but I need to know the name to google it. I tried to Google similar images to no avail.

5
  • 2
    Sorry.. like what? The double rectangles? That's not a simple CSS border. It would take 2 divs (or before:: or after:: elements). It's an art deco border, but I doubt you'll find anything related to CSS for that.
    – Scott
    Commented Aug 4, 2022 at 8:13
  • You mean the two yellow border rectangles?
    – Vikas
    Commented Aug 4, 2022 at 8:25
  • @vikas sorry could have been more specific: yes the yellow rectangles Commented Aug 4, 2022 at 9:42
  • @Scott thanks!, that helps already a bit... Commented Aug 4, 2022 at 9:55
  • You could also use SVG if you needed more flexibility. You might also be able to create it using special gradients as a background-image Commented Aug 4, 2022 at 12:57

1 Answer 1

2

The two yellow rectangles make an Art Deco style border.

But I doubt that'll be helpful in terms of Cascading Style Sheets (CSS). It's not possible to use the border property in CSS to create such a thing.

There may be a few ways in CSS to construct something similar. Just off the top of my head .. using absolute positioning and 2 divs could work:

<div id="A">
<div id="B">
<h1>A bunch of stuff here</h1>
</div>
</div>

#A {
  position: absolute;
  top: 0;
  left: 25px;
  display: block;
  width: 550px;
  height: 450px;
  border: 2px solid #a00;
}

#B {
  position: absolute;
  top: 25px;
  left: -25px;
  z-index: 5;
  display: block;
  width: 600px;
  height: 400px;
  border: 2px solid #a00;
  text-align: center;
}

enter image description here

(...or you could use pseudo elements (::before or ::after) to create the second div.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.