To create a border around an element is straightforward with CSS3.
Take a basic HTML5 page with a ‘h1’ element inside ‘header’ tags. We then add a CSS3 Border Property to the ‘h1’ on line 8.

The CSS3 border attribute has two values, ‘5px‘ and ‘solid‘. The first value is the width which is set to 5px.
The second value is the borders style which is set to solid.

CSS3 Border Property, with a solid border style and a width value of 5 pixels

Lets change the two values to ‘10px‘ and ‘dotted‘.

CSS3 Border Property, border with a dotted border style value and a 10 pixels width value

Stunning!

And why not add some colour to brighten things up. Orange perhaps?

CSS3 Border Property, dotted border style value, 10 pixels width value and orange color value

Wow!

On line 8 the border attribute now has a third value, ‘orange‘. The border property can take three values,

  • width
  • style
  • color

CSS3 Border Property

Another possibility with the CSS3 Border property is to add a curve with ‘border-radius‘. Here is a simple example. On line 8 is the ‘border-radius‘ attribute with two values of ‘15px‘ and ‘50px‘ which specify which corners to adjust and the amount in pixels. The first value of ‘15px‘ applies to the top-left and bottom-right-corner, and the second value of ‘50px‘ applies to the top-right and bottom-left-corner.
On line 9 a ‘background‘ of ‘lightBlue‘ is added and on line 10 the ‘text-align‘ is set to ‘center‘.

CSS3 Border Property , border-radius example


CSS3 logo. CSS3 Border Property Width Style Colour

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *