making borders around CSS shapes

Question

So I'm drawing elements in CSS, using this tutorial as a guide. I need some help with borders, though. For instance, here's my code for a curved trapezoid:

.foobar {
  height: 0px;
  width: 140px;
  position: relative;
  border-bottom: 200px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom-left-radius: 150px 70px;
  border-bottom-right-radius: 100px 25px;
}

The problem: I want to draw a 1px line border around the foobar element, but I'm already using the border properties to draw the element in the first place.

Is there an easy way to do this? My sense is that I'll have to create a shadow element that is the same shape as -- but slightly larger than -- the foobar element.

Thanks in advance!

Thanks, marcotsuka! I ended up using a version of your response, as well as the box-shadow property, to generate a variety of non-border borders. — raorao
– raorao, Commented Feb 23, 2014 at 19:10

marcotsuka · Accepted Answer · 2014-02-22 22:17:13Z

4

You can position a :pseudo element behind with slightly adjusted dimensions.

.foobar, .foobar:before {
  height: 0px;
  width: 140px;
  position: relative;
  border-bottom: 200px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom-left-radius: 150px 70px;
  border-bottom-right-radius: 100px 25px;
}
.foobar:before {
  content: "";
  display:block;
  position: absolute;
  left: -31px;
  top: -1px;
  width: 142px;
  z-index: -1;   
  border-bottom: 202px solid black;

  /* add these lines if you're a pixel perfectionist */
  border-bottom-left-radius: 150px 71px;
  border-bottom-right-radius: 100px 26px;
}

http://jsfiddle.net/4vNGL/2

answered Feb 22, 2014 at 22:17

marcotsuka

1062 bronze badges

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

Comments

G-Cyrillus · Accepted Answer · 2014-02-22 22:16:56Z

You can use a pseudo element drawn behind with same rules with a small increase of scale.

.foobar, .foobar:before {

  height: 0px;
  width: 140px;
  position: relative;
  border-bottom: 200px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom-left-radius: 150px 70px;
  border-bottom-right-radius: 100px 25px;
  position:relative;
}
.foobar:before {
  content:'';
  position:absolute;
  display:block;
  z-index:-1;
  top:0;
  left:-30px;
  width: 140px;
  -webkit-transform-origin:center;
  -webkit-transform:scale(1.03);/* adapt here the width of your fake border */
  transform-origin:center;
  transform:scale(1.03);
  border-bottom: 200px solid black; /* color of fake border */
}

http://codepen.io/gc-nomade/pen/eDIGJ

You can even play with both pseudo-element and still add some shadows: http://codepen.io/gc-nomade/pen/axmsc

Collectives™ on Stack Overflow

making borders around CSS shapes

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related