How to create this border effect using CSS3?

HTML & CSS
1

Hi guys,

I am wondering if somebody can tell me how i can accomplish to get this effect using CSS3:

http://s16.postimg.org/wc0zxs1z9/Screen_Shot_2015_06_12_at_18_17_58.png

My thought was using border: left, right, bottom and at the top maybe position relative with margins and width?

What would be the best way do something like this?

Thanks :smile:

2

It could be that the “About us” element has a negative top-margin to push it up and a white background, blocking out part of the border.
Another way would be a gradient or image in the top border.

3

This does it:-

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name=viewport content="width=device-width, initial-scale=1" />
        <style>
            body {
                background: #fff;
                font-family: sans-serif;
            }
            #mainframe  {
                width: 60%;
                border: solid 2px #000;
                text-align: center;
                margin: 5em auto;
            }
            h1  {
                margin: auto;
                margin-top: -20px;
                background: #fff;
                width: 50%;
            }
            p   {
                margin: 2em auto;
                width:  80%;
            }
        </style>
        <title>Border</title>
    </head>
    <body>
        <div id="mainframe">
                <h1>
                    ABOUT US
                </h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </div>
    </body>
</html>
4

I can offer such variant.

5

If you want to see the background behind the text then use the method that Leus Maximus showed above as that allows for images or gradients to be behind the text as you don’t need to rub anything out.

We had a similar question a few weeks ago and my answer was much the same.

If the background isn’t an issue then SamA74’s method is fine but maybe use ems instead of pixels for the negative margin in case the user resizes the text.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.