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.

New contributor
Stephan Graf is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
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
    Aug 4 at 8:13
  • You mean the two yellow border rectangles?
    – Vikas
    Aug 4 at 8:25
  • @vikas sorry could have been more specific: yes the yellow rectangles Aug 4 at 9:42
  • @Scott thanks!, that helps already a bit... Aug 4 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 Aug 4 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

Stephan Graf is a new contributor. Be nice, and check out our Code of Conduct.

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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