CODEWITHSUNDEEP
css
Jitendra
Jitendra

Reputation: 23

How to add a border bottom like the image?

I just want to know how can I add a border to the bottom of my container like this:

http://awesomescreenshot.com/0a551tq923

Assuming the border is white there and the container is above that.

I know it requires some minor CSS but can not figure that out.

Thank you.

Upvotes: 0

Views: 39

Answers (3)

ryantpayton
ryantpayton

Reputation: 405

I created a JSFiddle to show an example of what you could do. All using CSS.

I could see multiple ways of accomplishing this using the basic example I provided.

The css used for the bottom slant:

#bottom {
    width: 0;
    height: 0;
    border-top: 20px solid black;
    border-left: 500px solid transparent;
}

Edit:

Here is another example. More close to the website.

Also the website is using parallax. So it's going to be a little different then what I threw together.

Upvotes: 1

Cinzia Nicoletti
Cinzia Nicoletti

Reputation: 197

With CSS3 you can do the same of the image that you like, try with:

#container {
   border-radius: 10px 10px 10px 10px; 
   -moz-border-radius: 10px; /* firefox */
   -webkit-border-radius: 10px; /* safari, chrome */
}

And if you want even the shadow try with:

-webkit-box-shadow: 0 5px 10px #303030;

Upvotes: 0

user1608841
user1608841

Reputation: 2475

you can do like :

#container {
  background:url('path to image which needed as border') no-repeat center bottom;
}

Upvotes: 0

Related Questions