Modelling Edge of an Element (DIV)

Question

I want to know how I manipulate the edge of a div. The idea is to have a nice border Expand in the upper right corner of this element.That is, if the div has a 4 px square format on each side.I want the upper right side to have a 2px border of size and well Expand.

Answer 1

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: https://www.w3schools.com/css/tryit.asp?filename=trycss_border-width

Edit

Edge only on the right and top of the 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>