CODEWITHSUNDEEP
htmlcss
Emre Ozturk
Emre Ozturk

Reputation: 11

How can I have borders on my website?

I am extremely new to all this HTML and CSS stuff so keep in mind that I am a newbie and don't just shout at me for not knowing this. :)

I am currently creating a website for myself in order to learn how to make a website. I had a design in mind when i started: a 864px light grey centered area which dropped a shadow on the white bg. I accomplished this by making a thin portion of it in PS and repeating it. When i make divisions a have to make them exactly 864px wide but that causes problems in small devices. Is there a way to make everything bound to those lines?

PS: My English is bad, sorry. Photo of it, in case I couldn't explain it:
By border I tried to mean those shadows. https://i.sstatic.net/QnMl1.jpg

Upvotes: 1

Views: 213

Answers (2)

Vivek Sadh
Vivek Sadh

Reputation: 4268

You can use this:-

box-shadow: 10px 10px 5px #888888; // you can change it to whatever you want.

For adding shadow left and right use this:-

<style> 
div {margin: 20px; width: 400px; height: 400px;
-webkit-box-shadow: 4px 2px  #222,  -4px 0 2px #222;   
-moz-box-shadow: 4px 0 2px #222,  -4px 0 2px #222;   
box-shadow: 4px 0 2px #222,  -4px 0 2px #222; 
}
</style>

Upvotes: 0

reinder
reinder

Reputation: 2551

You could for example use CSS instead of images.

You'll probably get something like this:

<div id="wrapper">
    <div class="container">
        <!--864px wide-->
    </div>
</div>

.container
{
    width: 864px;
    margin: 0 auto; /*align in center*/
    box-shadow: 0px 0px 5px #888;
}

box-shadow for the shadow, this means: 0 from the left and 0 from the top so a centered shadow, blurred by 5px and color is #888, this may also be a rgba color

Upvotes: 6

Related Questions