How to create this CSS border


Tags: css

Problem :

Hi guys i'm trying to create this(image) css border around a div, but having trouble.

I have created the border but cannot get the border to be smooth. here is my code

border-left: 5px solid #036;
border-right: 5px solid #036;
border-top: 10px solid #036;
border-bottom: 5px solid #036;


Solution :

Fiddle Up, You can see it here.

Hope it help.

EDIT:

Html:

<div class="a">
    <span class="abs">Title here?</span>
    <div class="b">
        Hello.                
    </div>
</div>​

Css:

div.a {
    border-top: 10px solid #333;
    border-left: 5px solid #333;
    border-bottom: 5px solid #333;
    border-right: 5px solid #333;
    border-radius: 10px;
    background-color: #333;
    width: 200px;
    height: 400px;
}
div.b {
    border-radius: 5px;
    background-color: #FFF;
    width: 180px;
    height: 350px;
    padding: 10px;
}

.abs {
    color: #FFF;
    display: inline-block;
    font-weight: bold;
    margin-bottom: 10px;
}

    CSS Howto..

    how to replicate pinterest.com's absolute div stacking layout [closed]

    How to ensure three DIV are the same height regardless of content

    How To Use CSS To Add Multiple Fonts In One Paragraph And How To Add Multiple CSS Properties To One CSS Id?

    Why my tabs (i.e HOME, ABOUT ME..) doesn't show the corresponding paragraph or section?

    Why does first slideshow image click skip transition and go straight to image?

    how to fit the original text format of a paragraph into the html paragraph element using jquery?

    How do CSS radio tabs work?

    How to add a id tag in php output?

    jQuery slideshow with separate div containing image specific text

    HTML/CSS showing buttons online and auto going to next line

    multiple “HTML” tags in HTML file: how to separate CSS rules when classes and id's can be the same?

    How to apply css to iframe content? [closed]

    How to catch this nth-child() with css

    jQuery dialog: how to control the button-pane height

    How to create HTML5 popup with minimize etc

    How to add css to modules in prestashop 1.5?

    several questions about how to work with divs

    How to use regex to match css elements

    How to fill a text with color using CSS?

    CSS: how to address Samsung Android browser?

    How to dynamically adapt the layout by using only CSS

    How to do a “true” carbon fiber CSS background

    How to extend a CSS/HTML content box to the bottom of browser/viewport window when other elements above it push it down?

    How can I force menu items to fit to column width?

    Horizontal
      navigation - how to vertical align contents of

    How to wait for a video background in HTML until it finish and then view the contents of body section?

    How to vertically align and stretch content using CSS flexbox

    How do I align this icon while having the input take 100% width?

    How to center text in lists?

    How to make one Div's position (not child or parent) completely linked / dependent on another Div's position?