What is the best way to add borders to my website design?

Question

What is the best way to add borders to my website design?

As someone brand new to the world of HTML and CSS, please be patient with me as I learn the ropes. :)

Currently, I am in the process of building my own website to gain experience in web development. From the beginning, I envisioned a centered, light grey area of 864px with a shadow on a white background. To achieve this, I created a thin portion in Photoshop and repeated it. However, I encountered an issue when creating divisions that need to be exactly 864px wide, causing problems on smaller devices. Is there a way to keep everything aligned with those dimensions?

My apologies for my poor English skills. If my description is unclear, please refer to the photo linked below for a visual representation. The "border" in question refers to those shadows.

Photo reference:
https://i.sstatic.net/QnMl1.jpg

html css

Answer 1

Answer №1

An alternative approach could be using CSS in place of traditional images.

An example implementation might look something like this:

<div id="content">
    <div class="box">
        <!--864px width-->
    </div>
</div>

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

In this setup, we are utilizing the box-shadow property to create a shadow effect. The parameters specify a shadow located at 0 from the left and 0 from the top, resulting in a centered shadow with a 5px blur and color #888. You could also use rgba colors for more customization.

Answer 2

An alternative approach could be using CSS in place of traditional images.

An example implementation might look something like this:

<div id="content">
    <div class="box">
        <!--864px width-->
    </div>
</div>

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

In this setup, we are utilizing the box-shadow property to create a shadow effect. The parameters specify a shadow located at 0 from the left and 0 from the top, resulting in a centered shadow with a 5px blur and color #888. You could also use rgba colors for more customization.

Answer 3

Answer №2

If you want to add a shadow effect, you can achieve that with the following code:

box-shadow: 10px 10px 5px #888888; // feel free to customize the values.

To create a shadow effect on the left and right sides, you can use the code snippet below:

<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>

Answer 4

If you want to add a shadow effect, you can achieve that with the following code:

box-shadow: 10px 10px 5px #888888; // feel free to customize the values.

To create a shadow effect on the left and right sides, you can use the code snippet below:

<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>

What is the best way to add borders to my website design?

Answer №1

Answer №2

Similar questions

The effectiveness of the javascript widget is hindered by the absence of the meta viewport tag,

align all items centrally and customize Excel columns based on the length of the data

Using CSS Classes with PHP Variables in Conditionals: A Handy Guide

Verify whether the content of $_FILES consists of HTML

Is Django_compressor concealing the CSS code?

What is the best way to modify a CSS property using logical operators in JQuery?

Tips for centering an image vertically in a table's cell

Send the value of an li element using AJAX when clicked back to the original page

The class [AdminController] being targeted does not exist

How can you position two elements at the bottom of a ul element with a lengthy height?

Tips for effectively displaying elements on a page

Preventing Banner Images from Covering Side Carts in E-commerce Stories - Tips and Tricks

What could be causing my backend to malfunction while the website is live?

Saving an image and form data together in local storage can be accomplished by using JavaScript

Leveraging HTML5 Canvas for blending multiple transformations

JavaScript code is failing to render data properly within HTML documents

Production environment experiencing issues with jQuery tabs functionality

Guide on removing the <hr/> tag only from the final list item (li) in an Angular

AngularJS: Modifying values in one div updates data in all other divs

Displaying an automatic row using jQuery in real-time