CODEWITHSUNDEEP
bordercss
user1278496
user1278496

Reputation: 1066

Border image for just the bottom using CSS

I am wanting to use an image as a border but just for the bottom - can this be achieved in CSS? I have briefly researched it and im reading about slices etc but I dont quite understand it.

I thought there might be something like border-bottom-image or similar to that...

Thanks

Upvotes: 3

Views: 11965

Answers (3)

i'm Ahmad
i'm Ahmad

Reputation: 67

you can use this css property:

border:solid;
border-bottom-width:10px; //thickness of border
border-image:url(image.jpg) 0 0 20 0 repeat; //20 is length of your image

Upvotes: 2

Seeking Knowledge
Seeking Knowledge

Reputation: 162

First make your HTML something like this: 

<div class="container block">
   <div class="content block">
      <---!Putt content here!--->
       <div class="border-bottom block">
           <---!Make it empty!--->
       </div>
   </div>
</div>

Then make the css something like this:

.block
{
  display:block;
  position:relative;
  width: xpx; /*choose your width (x) */
}

border-bottom
{
  background: url('picture url');
}

ps: you can repeat this as much as you want and you'll have always the style for those classes (just copy and past the HTML code)

Upvotes: 2

ralph.m
ralph.m

Reputation: 14345

Perhaps think of this in another way. You want an image to appear along the bottom of an element. It might look like a border, but it doesn't have to be called one. An easy way to get the visual effect you are seeking is to place some padding on the element and place the image as a background image in that padding area. E.g.

element {padding-bottom: 20px; background: url(bgimage.png) no-repeat 50% 100%;}

Upvotes: 4

Related Questions