CSS - Implementing a border image with tab

Question

More a back end programmer, but I'm implementing a design, and I just wanted to see what the most efficient way of implementing a border box would be.

Here is an example of the box -

border box

The idea is that the blue tab will contain the header text for the section.

Ideally I'd like to use just HTML and CSS, but I realise I may need to use the tab as an image because of it's shape. These boxes can be numerous sizes depending on the content.

I could do the blue border no problem using

 -webkit-border-radius: 10px; -moz-border-radius: 10px;

or similar, it's mainly the tab that poses the issue for me. Has anyone done anything similar that can offer advice?

What browsers do you need to support?

Boldewyn
– Boldewyn

2012-09-28 09:24:08 +00:00
Commented Sep 28, 2012 at 9:24 — Boldewyn
– Boldewyn, Commented Sep 28, 2012 at 9:24

Marko · Accepted Answer · 2012-09-28 09:34:15Z

1

Start here and modify as you need, should work for what you're after.

answered Sep 28, 2012 at 9:34

Marko

72.3k29 gold badges126 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boldewyn · Accepted Answer · 2012-09-28 09:27:39Z

1

.tab-header {
  background: blue;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-bottom: 10px; /* we extend the header by 10px to the bottom */
}

.tab-body {
  border: 1px solid blue;
  background: white; /* set a solid background */
  margin-top: -10px; /* move the body 10px up, so it covers the
                        10px padding from above */
}

You must prefix the border-radius stuff accordingly, but apart from that this should work in any recent browser.

answered Sep 28, 2012 at 9:27

Boldewyn

83.1k45 gold badges161 silver badges218 bronze badges

Collectives™ on Stack Overflow

CSS - Implementing a border image with tab

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related