How to make different kind of borders

Question

I want this kind of border on an div, there is a way to make it?

I tried putting an image background on a div, but is not functional for responsive purposes:

.center-social-networks {
    background: url("http://cosmoscreativeagency.com/imagenes/linear_rectangle.png") no-repeat;
    background-size: 300px auto;
    width: 100%;
    height: 200px;
}

<div class="center-social-networks"></div>

Possible duplicate of [Stretch and scale CSS background](http://stackoverflow.com/questions/376253/stretch-and-scale-css-background) — Oscar Siauw, Dec 15 '16 at 00:37

score 0 · Answer 1 · answered Dec 15 '16 at 00:35

0

Try this... by setting background-size to 100% 100%

.center-social-networks {
    background: url("http://cosmoscreativeagency.com/imagenes/linear_rectangle.png") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 200px;
}

<div class="center-social-networks"></div>

answered Dec 15 '16 at 00:35

Oscar Siauw

483
2
8

this is not functional for me – Kenny Amaro Dec 15 '16 at 02:40
@KennyAmaro Not functional how? – Oscar Siauw Dec 15 '16 at 02:48
@KennyAmaro the border is taking 100% width and height for me and resizes as I resize the screen – Oscar Siauw Dec 15 '16 at 02:50
please check out my answer, that was what I was looking for – Kenny Amaro Dec 15 '16 at 21:20
@KennyAmaro well, you were not clear in your question on what you're trying to achieve – Oscar Siauw Dec 16 '16 at 00:11
are you sure? "I want this kind of border on an div, there is a way to make it?" – Kenny Amaro Dec 17 '16 at 02:30
@KennyAmaro For example in your question you were using the image linear_rectangle.png but in your "answer" you are using a different image. How is that being clear on what you're trying to achieve? – Oscar Siauw Dec 17 '16 at 13:32

score 0 · Accepted Answer · answered Dec 15 '16 at 21:19

I was looking for a property who makes me set my own border type, I found border-image, with this new css3 property I just can specy a route for an image, this property makes me set my own border type.

example below:

.test {
  width: 500px;
  height: 100px;
  border: 3px solid transparent;
  border-image: url(http://cosmoscreativeagency.com/imagenes/square1.png) 5 space;
}

<div class="test">text inside<div>

How to make different kind of borders

2 Answers2