How to have multiple borders on div using css

Question

I have searched alot, but i did not find any solution. I want to have border at bottom something like below image. multiple border how can i have this type of border on div. I also want to have cricle image with shadow circle like this circle image

To add border at bottom in the first image i have added this code:

.login-wrapper {
    background-color: #fff;
    padding: 20px 30px;
    margin: 0 auto;
    border-bottom: 1px solid #333333;
    box-shadow: 0 2px 0 0 #338833, 0 2px 0 0 #883333;
}

but, It is not generating the desired output.

To get the desire output for second image. I have added the below code.

for circle image i have added this code:

<div class="login-wrapper" ng-controller="loginController">
    <div class="field-wrapper">
        <div class="login-img-wrapper">
            <img src="img/person.png" class="img-circle" />
            <div class="shadow"></div>
        </div>
    </div>
</div>

.login-img-wrapper img {
    border: 1px solid #f4f4f4;
    background-color: #f4f4f4;
    padding: 5px;
    height: 70px;
    width: 70px;
    border-radious: 50%;
}

.login-img-wrapper .shadow {
    background-image: linear-gradient(130deg, white 50%, transparent 40%);
    opacity: .7;
    z-index: 15;
    position: absolute;
    height: 60px;
    width: 60px;
    top: 0;
}

but this is not generating the same image. Please somebody help me.

What output i have got after aplying above defined css for second image .

Answer 1

Here is a start from where you can experiment with circle, shadow and border.

Fiddle Demo 1
Fiddle Demo 2 (Changed border/padding for image)

<div class="login-wrapper" ng-controller="loginController">
    <div class="field-wrapper">
        <div class="login-img-wrapper">
            <img src="http://lorempixel.com/output/people-q-c-100-100-9.jpg" />
            <div class="shadow"></div>
        </div>
    </div>
</div>


.login-img-wrapper {
    position: relative;
    height: 150px;
    width: 150px;
    background-color: #eee;
    margin: auto;
    border-bottom: 1px solid #bbb;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.login-img-wrapper:after,
.login-img-wrapper:before {
    z-index: -1;
    height: 4px;    
    bottom: -5px;
    left: 6px;
    right: 6px;
    background-color: #eee;
    border-bottom: 1px solid #bbb;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    content:" ";
    position: absolute;
}
.login-img-wrapper:after {
    bottom: -3px;
    left: 3px;
    right: 3px;
}
.login-img-wrapper:before {
    box-shadow: 0 0 10px gray;
}

.login-img-wrapper img {
    border: 1px solid #f4f4f4;
    background-color: #f4f4f4;
    padding: 5px;
    height: 90px;
    width: 90px;
    border-radius: 50%;
    box-shadow: 0 0 10px gray;
}

.login-img-wrapper .shadow {
    background: linear-gradient(130deg, white 50%, transparent 40%);
    border-radius: 50%;
    opacity: .7;
    z-index: 15;
    position: absolute;
    height: 100px;
    width: 100px;
    top: 0;
}

Update

Using the new CSS clip-path shapes circles, ellipses, and polygons, more advanced masking and shapes can be done, though it still has bad browser support.

Read more about it here: https://css-tricks.com/clipping-masking-css/

For even more advanced clipping/shadowing (and better browser support) I recommend to start using SVG in combination with CSS.

As a start here is some ways to go: Draw a crescent moon using SVG in HTML

Answer 2

You can try with box-shadow:

.border-box {
	background:#ff0;
	display:inline-block;
	width:200px;
	height:20px;
	box-shadow:
		0 1px 0 #999,
		0 2px 0 #fff,
		0 3px 0 #999,
		0 4px 0 #fff,
		0 8px 0 #999;
}

<div class="border-box"></div>

For your second image:

.circle-image {
	width:200px;
	height:200px;
	display:inline-block;
	background:#ccc;
	border-radius:50%;
	position:relative;
  text-align:center;
}
.circle-inner {
	width:200px;
	height:200px;
	display:inline-block;
	border-radius:50%;
	position:relative;
	transform:rotate(-45deg);
	position:absolute;
	top:0;
	left:0;
}
.circle-inner:after {
	content:"";
	width:200px;
	height:90px;
	display:inline-block;
	background:rgba(255,255,255,.3);
	border-radius:200px 200px 0 0;
	position:absolute;
	top:0;
	left:0;
}

<div class="circle-image">
  <div class="circle-inner"></div>
</div>

Answer 3

You typed the radius spelling wrong.

.login-img-wrapper img {
    border: 1px solid #f4f4f4;
    background-color: #f4f4f4;
    padding: 5px;
    height: 70px;
    width: 70px;
    border-radius: 50%;
}