How to have multiple borders on div using css


Tags: html,css,css3

Problem :

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 Cricle image after applying above defined css.



Solution :

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


    CSS Howto..

    using css, how to position image so when resizing window, image will not move

    How to refer css style from another?

    How to apply multiple css radial gradients to a single element

    How to get the “true” computed CSS width in Chrome / IE

    How have icons/lines change color on scroll down using Jquery/CSS?

    How to hover over a div to change just a part of its background?

    How do I get two divs next to eachother, but spaced?

    How to only make the opacity lower for the background and not the text in it?

    How to create a vertical clickable divider|line in bootstrap?

    HTML+CSS: How to force div contents to stay in one line?

    How to fit textarea exactly inside a div - CSS

    How do I select an element in the dom with an attribute of ct:value?

    How to stop the css attribute font-size to get override from external style sheet universal selector

    How do I correct this error?

    How to change the look of a timer in javascript, css?

    How to get the complete css information if css class is given form the used style sheets files

    How can i give transparency effect in CSS?

    How to center text inside a div element? [duplicate]

    How to access an object from a webpage in selenium

    How do i select rows that correspond to a rowspan?

    How do I set the background-image property to a linear gradient using jQuery's css method?

    How to test print output of browsers with online tools?

    CSS Sub Menu shows up outside body

    How to create smooth headlines with HTML and CSS?

    How to create an interactive image with HTML5, Javascript, DOM and CSS

    How to determine if a device is in portrait or landscape mode using CSS

    How to concatenate icons into a single image with ImageMagick?

    How can I style the n-th div with CSS

    how to code a stickyfooter in css?

    How to scale html font size in Bootstrap 4 without breaking responsive navbar