How to make a stylized border?

Question

How to make a stylized border?

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (-1 votes)

1

How to make a stylized border as picture below? The big question is that on the left side there are two border styles.

css

asked by anonymous 30.06.2017 / 18:56

3 answers

1

Use the border-image attribute.

<p id="borderimg">Utilize o atributo <strong>border-image</strong></p>
<style> 
#borderimg
{ width:300px;
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("https://i.stack.imgur.com/vnBXc.jpg") 27;
}
</style>

Check compatibility between browsers.

30.06.2017 / 19:14

-1

You can do something like the example below:

.border-on-top {
  border-top:1px solid black;
  position: relative;
}
 
.half-a-border-on-left {
  border-left: 1px solid black;
  position: relative;
  height: 50px;
}
.half-a-border-on-left:after {
  padding:0;
  margin:0;
  content: "";
  width: 1px;
  height: 10px;
  background-color:white;
  position: absolute;
  left:-1px;
  top: -10px;
}
.half-a-border-on-left:before {
  padding:0;
  margin:0;
  content: "";
  width: 1px;
  height: 50%;
  background-color:blue;
  position: absolute;
  left: -1px;
  bottom: -5px;
}

<div class="half-a-border-on-left border-on-top">Hello world!</div>

link

30.06.2017 / 19:26

Problem with window.location Problems with insertion into an array

score 3 · Accepted Answer

If the only stylized border is left, you can work with the :before and :after pseudo-elements, styling both their edges and their body. Here's an example where I created the thinnest border with the element before and the small gray segment with the element after :

.border {
  width: 300px;

  border-top: 3px solid #1E90FF;
  border-left: 3px solid #1E90FF;
  position: relative;
  background: white;
  
  padding: 20px;
  font-family: monospace
}

.border:before {
  content: " ";
  position: absolute;
  width: 2px;
  height: calc(100% - 80px);
  left: -3px;
  bottom: 0;
  border-left: 1px solid #CCCCCC;
  background: white;
}

.border:after {
  content: " ";
  position: absolute;
  width: 2px;
  height: 30px;
  left: -2px;
  top: 100px;
  background: #CCCCCC;
}

<div class="border">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare, mi posuere suscipit malesuada, est ante tempor augue, quis porttitor lectus mauris ac diam. Morbi sed tortor justo. Etiam maximus orci magna, quis tristique dolor tempor id.
</div>