Web Development

Bordering with CSS

Bordering with CSS is the section 11 of Beginner’s Guide to CSS.

You have already know about table borders. Also you know changing the color of the border and size of the border. Like as the table, most of the HTML elements can have CSS borders using the same property ‘border’. In this section, we are going through more in that discussion.

CSS Border Style

Borders are not just always a solid line. You can create it as something different. Look at the following. Remember the second property value of the shorthand property border. That defines the border style. Also you can use the property border-style to define it. This is a required property when setting a border to a HTML element.

A dotted border

[code language=”css”] p{
border: 1px dotted blue;
}
[/code]

No Border. Same effect can get from the property value hidden.

[code language=”css”] p{
border: 1px none blue;
}
[/code]

A dashed border

[code language=”css”] p{
border: 1px dashed blue;
}
[/code]

A solid border

[code language=”css”] p{
border: 1px solid blue;
}
[/code]

A double border. Defines two borders. The width of the two borders are the same as the border-width value

[code language=”css”] p{
border: 5px double blue;
}
[/code]
Following 3D effects are depend on the color of the border. Use a lighter color to get a great effect.

A groove border

[code language=”css”] p{
border: 8px groove #B2CAF6;
}
[/code]

A ridge border

[code language=”css”] p{
border: 8px ridge #B2CAF6;
}
[/code]

A inset border

[code language=”css”] p{
border: 8px inset #B2CAF6;
}
[/code]

A outset border

[code language=”css”] p{
border: 8px outset #B2CAF6;
}
[/code]

Border Width

This is the first property value of the short hand property border. Use the property border-width to define it specifically. Width can be set as a fixed pixel value or pre-defined value names: thin, medium, or thick.

Border with medium value name

[code language=”css”] p {
border-style: solid;
border-width: medium;
}
[/code]

Border with pixel value

[code language=”css”] p {
border-style: solid;
border-width: 5px;
}
[/code]

Border Color

You already know the three ways of specifying color on a web page. So you can use any of the three ways to set a color on a border which is the third property value of the shorthand property. Or else you can use the border-color property specifically.

Side Border

You can avoid having borders on specific sides of the element by defining only the borders you needed on the sides left, right, top or bottom. Also you can change the style of the border in each side.And color too.  What you have to do is put the name of the side in the middle of the property name like this syntax.

border-[side]-[property]

Border with different styles for different sides

[code language=”css”] p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
[/code]

To simplify the above code you can do something like this.

[code language=”css”] p {
border-style: dotted solid;
}
[/code]

This code snippet gives you the same display. Did you realize what happened there. Let me tell you how it was happened.

First property value define the top side. Second property value defines the right side. As the border style property got only two values, it means both top and bottom sides by the first property value and, right and left sides by the second property value.
If the border style got four values, it means third and fourth property values represent the bottom and left sides accordingly.
So if three property values or one property value means what would happen? By combining the above two facts you can come up with an answer, I’m sure. Any property we discuss in this section is applicable for this sides effect.


In this section we came up with one of the property we discussed in the box model. That is the border property.  We came up with three properties in the border family. In the next section we are look at a property same like the border.

WHAT’S NEXT?

Learn what is actually a CSS Outline.

 

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW