Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
287 views
in Technique[技术] by (71.8m points)

jquery - How can I show only corner borders?

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

****                         ****
*                               *
*                               *

             CONTENT

*                               *
*                               *
****                         ****
Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I would use overlapping divs.

One with square corners. And the Other with rounded corner (so it doesn't hide the corners of the first one).

<div id="div1" />
<div id="div2" />


#div1 {
  position:absolute;
  top:9px;
  left:9px;
  height:100px;
  width:100px;
  background-color:white;
  border:1px solid black;
}

#div2 {
  position:relative;
  top:-1px;
  left:-1px;
  height:102px;
  width:102px;
  background-color:white;
  border-radius: 15px;
}

http://jsfiddle.net/y3EfP/

Result:

enter image description here


An enhanced solution provided by @web-tiki:

http://jsfiddle.net/webtiki/y3EfP/147/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...