CODEWITHSUNDEEP
css
AKZ
AKZ

Reputation: 876

How can I set a specific border around an element?

I want to put a specific border like below around my element. How can I do this with css.

Button with border

I use this css for showing a border around an element:

.ui-selected {
  -moz-box-shadow: 0 0 1px 1px black; 
  -webkit-box-shadow: 0 0 1px 1px black; 
  box-shadow: 0 0 1px 1px black;
}

But I want to show border like in the image. Is this possible?

I want to put those eight square around an element.

I use $('#element').addClass('ui-selected') to add and $('#element').removeClass('ui-selected') to remove.

I want css classes, is it possible

Upvotes: 1

Views: 257

Answers (4)

bookcasey
bookcasey

Reputation: 40463

You could experiment with pseudo elements:

div:after {
    content: '\25A0\25A0\25A0  \25A0\25A0\25A0  \25A0\25A0\25A0';
    position: absolute;
    top: -37px;
    left: -5px;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 75px;
    letter-spacing: 67px;

}

​This looks good in Webkit, and is a few pixels off in Firefox.

Demo

Upvotes: 0

Phrogz
Phrogz

Reputation: 303224

For the drag handles: although you could place them there with CSS, you would not be able to attach event handlers to them, nor change the mouse cursor when it goes over them.

To get both of these, you need the dots to be actual elements. See this example for one way to position corner elements. Cached for StackOverflow posterity (in the unlikely event that my site is down):

<html lang="en"><head>
  <title>Positioning Images</title>
  <style type="text/css">
    .compass          { position:relative }

    .compass .north,
    .compass .south,
    .compass .east,
    .compass .west,
    .compass .center  { width:15px; height:15px; position:absolute; left:50%; margin-left:-8px; top:50%; margin-top:-8px; cursor:pointer }

    .compass .north   { top:0; margin-top:0 }
    .compass .south   { bottom:0; top:auto; margin-top:0 }
    .compass .east    { right:0; left:auto; margin-left:0 }
    .compass .west    { left:0; margin-left:0 }
  </style>
</head><body>
  <div class="compass">
    <!-- your element here -->
    <img class="north west" src="c1.png" alt="resize">
    <img class="north east" src="c2.png" alt="resize">
    <img class="south east" src="c3.png" alt="resize">
    <img class="south west" src="c4.png" alt="resize">
    <img class="north" src="up.png" alt="resize">
    <img class="south" src="dn.png" alt="resize">
    <img class="east"  src="rt.png" alt="resize">
    <img class="west"  src="lt.png" alt="resize">
  </div>
</body></html>

Upvotes: 0

Fred Wuerges
Fred Wuerges

Reputation: 1965

Here is the solution: 

box-shadow: 2px 2px 1px 0 #666;
border-top: 1px solid white;
border-left: 1px solid white;

You can see on JSFiddle.

Upvotes: 2

A.M. D.
A.M. D.

Reputation: 928

You can specify a different colour for each side, using the border-(top|lef|right|bottom)-color property to add the highlights/shadows. The corners will be mitred accordingly.

Border-top-color

You may then try to use individual CSS3 border images placed at the corners to acheive the black squares.

border images

Upvotes: 1

Related Questions