Borders are also a way to make some elements look beautiful on your sites.
And some elements needs some border to separate from others.
Just have a look on a simple paragraph having some border around it:
And some elements needs some border to separate from others.
Just have a look on a simple paragraph having some border around it:
This is a paragraph with some border around it. We can design and decorate the border as we want.
Adding border to some element:
If you decided to add a border around some element, simply select the element in CSS style section and add the border properties for it. Look at the code snippet below:
.someclass p { border: 1px solid; }
Border Style
Border style property defines the style of any HTML elements's border, like dotted, dashed etc.
border-style values:
Border style values can be:
none: defines no border
dotted: defines a dotted line around element.
dashed: defines a dashed line around element.
solid: defines a solid line around element.
double: defines a double border around the element.
groove: defines a 3D grooved border. The effect depends on the border-color value
ridge: defines a 3D ridged border. The effect depends on the border-color value
inset: defines a 3D inset border. The effect depends on the border-color value
outset: defines a 3D outset border. The effect depends on the border-color value
Border width:
We can use the border of our desired thickness as well. We just need to set the
Border width can be set in pixels or in three pre-defined value, thin, medium and thick.
border-width property to do so.Border width can be set in pixels or in three pre-defined value, thin, medium and thick.
Note: The
border-width property can not work alone. We have to define the border using border-style property first.
Have a look here:
.someclass p { border: 1px; border-style: solid; border-width: 5px; }p.two { border-style: solid; border-width: medium; }Border Color:
To look borders more nice, we can change the color of the border too.
To do so, we just need to define
Border color can be set by:
border-color property.Border color can be set by:
- name - by specifying a color name like "red"
- RGB - Specify an RGB value like "rgb(255,255,255)"
- Hex - Specify a Hex value like "#ffffff"
If the border color property is not specified, then it is inherited from the element.
p.one { border-style: solid; border-color: red; }
p.two { border-style: solid; border-color: #ff0011; }
Learn more in the next part:
Muhammad Arslan Aslam
I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.
Get Free Email Updates to your Inbox!
Post a Comment
Suggestions will be greeted.