15 Fabulous CSS Border Styles

The CSS border properties allow you to specify the style and color of an element’s border. Here is a guide to all CSS border style properties with small demo.
This post has been borrowed from http://nisha.in/a-guide-to-css-border-style.
View original post here.

1. Simple  Border
This Border style is simple and highly used. In this border we use  border 1pixels solid in black color . This results in :

The CSS of this image

border: 1px solid #4C3C1B;
padding: 5px;
width: 300px;
background-color: #EFEECB;

2. Polaroid Border
For Polaroid image we use only padding and border. Here right padding is 80 pixels and top, left and bottom padding is 8 pixels.  This results in :

The CSS of this image

border: 1px solid #4C3C1B;
padding: 8px 80px 8px 8px;
width: 300px;

If you want image Polaroid on top then use bottom padding  80 pixel and  top, left and right padding is 8 pixels. This results in :

The CSS of this image

border: 1px solid #4C3C1B;
padding: 8px 8px 80px 8px;
width: 300px;

3. Frame Double Border
This technique is mostly used to make image galleries. The width of the two borders are the same as the border-width value, which makes frame around image like this…

The CSS of this image

border-style: double;
padding: 14px;
background-color: #d1e7f4;

4. Dotted and Dashed Border Style
Here is example of Dotted and Dashed border Style. Top and left side used dotted border style while bottom and right side used dashed border style , See below.

The CSS of this image


5. Frame Groove Border
Groove is a three-dimensional effect that gives the impression that the border is carved into the canvas. In this border style the effect depends on the border – color value. It is 3D grooved border.

The CSS of this image

border-style: groove;
border-width: 25px;

6. Inset Border Style
The inset value appears to make the whole box look as though it were embedded into the canvas.In this border style the effect depends on the border – color value. It is 3D inset  border.

The CSS of this image

border-style: 18px  inset  #d2e3ed

7. Outset Border Style
Outset is a 3D effect that has the opposite effect of inset in that the border gives the impression that the box protrudes from the canvas. The border makes the whole box look as though it were coming out of the canvas.

The CSS of this image

border-style: 18px  outset  #d2e3ed;

8. Ridge Border Style
Ridge is a 3D effect that has the opposite effect of groove, in that the border appears to protrude from the canvas.

The CSS of this image

border-style: ridge;
border-color: red;
border-width: 14px;

9. Above and Below Border Style
To give a stylist  look  to your image you can place border above and below or, right and left. You may give border double ,dotted, solid ,ridge,inset,and outset.  For this image top and bottom border is double, padding  5 pixels, and border width 8 pixels.

The CSS of this image


10. Off  Border Style
In this i have used top border style as ridge, border width is 8pixels, see below.

The CSS of this image

.off {
width: 300px;
padding: 0px 6px 6px 0px;
background-color: #9FB2C1;
border-top-width: 8px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 2px;
border-style: solid;
border-color: #082F70;

11. Round Corners Border Style
There are several ways to do this example, Here is one  method for creating boxes with rounded corners through the power of CSS. A similar technique can be applied to making borders with round corners. We’ll start by inserting our four corner curves as background images  (image created by the graphic program ) through the CSS:

For above four corners the CSS is–

.bl {background: url(bottoml.jpg) 0 100% no-repeat}
.br {background: url(bottomr.jpg) 100% 100% no-repeat}
.tl {background: url(topl.jpg) 0 0 no-repeat}
.tr {background: url(topr.jpg) 100% 0 no-repeat; padding:10px}

For second round corner in which include image the CSS is–


Another method is –
First take

Then next step is to slice it into three images, Top, Center and Bottom.

The HTML is written as

Place Your Image Here

The top and bottom div classes each have to have a width and height declared in order to see the background image. Finally result become as–

The CSS of this image

.roundtop {
background-image: url(rounded-top.jpg);
width: 315px;
height: 10px;
.roundside {
background-image: url(rounded-sides.jpg);
background-repeat: repeat-y;
width: 315px;
text-align: center;
.roundbottom {
background-image: url(rounded-bottom.jpg);
width: 315px;
height: 10px;

12. Fun Border Style
It is supported by all browsers. When playing with border-width you can get it like this

The CSS of this image


13. Patterned background border style
If you want to use images as the border background then Patterned background border style fulfills this desire. Here is background in a image form, with 15 pixels padding and border width is 2pixels . We can’t use image as image-border for all browser.

The CSS of this image

padding: 15px;
background-image: url(patternd.jpg);

14. Double Patterned background border style
In this we use double patterned background border style. Like this–

The CSS of this image

background-image: url(back.jpg);
border: 4px solid #ccc1c9;
padding: 26px 23px;
width: 223px;
padding: 15px;
background-image: url(patternd.jpg);
border: 2px solid #ff009d;

Apply Outer class to a div and then image tag is used.
15. Box Shadow with Radius Border Style
The  css3 property box-shadow allows to add without the use of images a shadow effect to the selected elements.
With this example you can make its own new Border Design. The css3 property box-shadow is at the moment supported by Safari 3.1+ adding the prefix -webkit., Firefox 3.5+ adding the prefix -moz.

Mozilla box-shadow defined x-axis,y-axis and z-axis. -moz-border-radius defined the corner radius border style.
The CSS of this image

border: 5px solid #111;
-moz-box-shadow: 35px 35px 7px #999999;
-moz-border-bottom-right-radius: 15px;
padding: 15px 25px;
height: inherit;
width: 300px;

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

22 thoughts on “15 Fabulous CSS Border Styles

  1. Thanks for ones marvelous posting! I genuinely enjoyed reading it,
    you will be a great author.I will be sure to bookmark your blog
    and will come back sometime soon. I want to encourage you to definitely continue your great posts,
    have a nice weekend!

  2. Hi there to every , since I am in fact eager of reading this weblog's post to be updated regularly.
    It contains good stuff.

  3. After looking into a handful of the articles on your web
    page, I seriously appreciate your technique of blogging.
    I saved it to my bookmark site list and will be checking back in the near future.
    Please visit my web site as well and tell me what you think.

  4. I have to thank you for the efforts you have
    put in penning this site. I really hope to see the same high-grade blog posts by you later on as well.
    In truth, your creative writing abilities has motivated me
    to get my own website now 😉

  5. Asking questions are actually nice thing if you are not understanding something
    entirely, however this piece of writing offers pleasant
    understanding yet.

  6. each time i used to read smaller content that also clear their motive,
    and that is also happening with this piece of writing which I am
    reading at this time.

  7. Then send the postcard to all of the addresses in your area,
    and try to draw customers in. With good habit and savings, you can be
    assured of having enough to start your own business.
    Typically, this works well if we are involved in a solid networking and we reciprocate, by referring clients to those other businesses.

  8. I leave a leave a response when I appreciate a post on a website or if I have something to valuable to contribute to the conversation. Usually it's caused by the passion displayed in the post I looked
    at. And after this post 15 Fabulous CSS Border Styles – WebSpeaks.
    I was excited enough to create a thought 😉 I do have a few questions for you
    if you usually do not mind. Could it be only me or does it look like some of
    the comments come across like they are left by brain dead visitors?
    😛 And, if you are posting at other sites, I'd like to keep up with you.
    Would you make a list all of your communal sites like your Facebook page, twitter feed, or linkedin profile?

  9. Nice post. I was checking continuously this weblog and
    I am inspired! Extremely useful info specially the last section 🙂 I maintain such info much.
    I was looking for this particular information for a long time.
    Thanks and good luck.

  10. Hello I am so excited I found your blog page, I really found you by accident,
    while I was browsing on Yahoo for something else, Nonetheless I am here now and would just like to say thanks for a
    fantastic post and a all round interesting blog (I also love the theme/design), I don’t have time to look over it all at the minute but I have saved
    it and also added in your RSS feeds, so when I have
    time I will be back to read more, Please do keep up the excellent jo.

  11. Hence, by detecting and repairing the leawk at
    an early stage, we ccan save water, our building, money and water for future generation. They don't actually
    do anything other than look fancy, which makes theem to similar to Xbox 360 Achievements oor Play
    – Station 3 trophies. People stop to wawtch a giant crane working
    on a construction site, whether it's a biig building or a home being built in the neighborhood.Even weekly, fortnightly or monthly checking is also not possible.
    The most prevaent type of toilet is the old-fashioned, evger before-trustworthy gravity toilet.
    His expensive knowledge has, iin fact, sparked significant risee iin revenue for talented plumbers across tthe nation,
    from Tucson Pllumbers Neeed one. There are two pieces
    of career advice I would offer here: advice for the fresh out of college grad and those
    alrady in the workforce looking to change careers. Society offers all sorts of jobs and
    if everyone onhly picked the jobs they 'loved' there would be an even higher unemoloyment
    rate with many waiting iin line to get the job they love
    someone else got before them. Any type of sewage blocxkage that goes beyond just the basic backed up toilet requires special tools to repair.
    If yyour lender is willing to waive any inspections, request them

Comments are closed.