How can I show only corner borders?

Question

I\'m wondering if it\'s possible in CSS or jQuery to make a border but only for corner. Something like this:

****                         ****
*                     


        

Answer 1

There is no clean css way to just give the corners a border, but you could try to mimic the effect. Something like this perhaps: http://jsfiddle.net/RLG4z/

  

    content
  


#corners {
    width: 200px;
    height: 50px;
    border-radius: 10px;
    background-color: red;
    margin: 10px;
}
#content {
  background-color: white;
  border-radius: 15px;
  height: 30px;
  padding: 10px;
}

due to the difference in border radius, the background color of the underlying div shows trough, giving the effect of a border on the corners.

Personally I think i would work with background images to achieve this, for better controle of the result.