Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

CSS Styling Property : Border

Sometimes developers will add a border around an element during development so that they can easily identify it on the page. Other times you may want to add a border simply to decorate the item on the page.

You can decorate HTML elements on your page with a border. Define your border as solid, dashed, or dotted. Not only can you place a border around a block of text, you can also add a border to an image.

Solid Lines, Dots & Dashes

The fixed position will ensure that an item stays fixed in its position no matter what or how the surrounding items are positioned. Some people use this code to create a "Sticky Top" or "Sticky Bottom". NOTE: - You can make an item stick to the bottom or top of the page but in real life, you would either choose sticky top or sticky bottom - not both because it would not give a lot of space for your middle content to be placed and still read easily.

HTML

html code styling border

CSS

css code for styling border

RESULTS

results of styling border

NOTES



When defining border width, if you want all four sides (top, bottom, left, and right) to be the same size then you can just use one measurement. If you use the type 2 definitions the first number is for the top and bottom and the 2nd number is for the left and right side. But in rare cases where you want each side to be a different width, you simply use 4 numbers - but place them in this order: the first number is for the top the 2nd number is for the right, the 3rd number is for the bottom and the the number is for the left side. /*

Practice adding a border to some of your HTML elements. Remember you can decorate your border by defining it as solid, dashed or dotted.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved