Modeling Edge of an element (DIV)

Question

Modeling Edge of an element (DIV)

Navigation

#1 by (4 votes)

2

I want to know how to manipulate the border of a div. The idea is to have a well-defined border in the upper right corner of that element. That is, if the div has a square format of 4 px on each side. top right has a 2px-sized border and well print.

javascript html jquery css

asked by anonymous 06.11.2017 / 02:46

1 answer

Preview Android stopped working after update What does the depth parameter of the json_encode () method mean?

score 4 · Accepted Answer

You can use:

border-width: 2px 10px 4px 20px; 
border-style: solid;

caption:

border-width: (top border) (right border) (bottom border)  (left border)

Example:

<div style="height: 100px; width: 100px; background: red; border-width: 2px 10px 4px 20px; border-style: solid;">
texto

</div>

Source: link

Edit

Edge only on right and top of div with 20px height and width

.div {
position:relative;
width:150px;
height:200px;
background: lightgray;
}

.div:before, 
.div:after, 
.div>:first-child:before, 
.div>:first-child:after {
    position:absolute;
    width:20px; height:20px;
    border-color:blue;
    border-style:solid;
    content: ' ';
}

.div:before {top:0;left:0;border-width: 0px 0 0 0px}
.div:after {top:0;right:0;border-width: 4px 4px 0 0}

.div>:first-child:before {bottom:0;right:0;border-width: 0 4px 4px 0}
.div>:first-child:after {bottom:0;left:0;border-width: 0 0 4px 4px}

<div class="div">
</div>