Граница CSS только на углах

Ответ 1

Я думаю, что вы также можете достичь этого, создав закругленную прямоугольную форму с прозрачным заполнением, используя любой редактор изображений, например Photoshop, затем сделайте это изображение в качестве фона для того, что вы пытаетесь сделать границей, чтобы позволить этому изображению находиться в div которые имеют абсолютную позицию и имеют соответствующий z-индекс, который может быть над частью, которую вы хотите дать, без влияния на отображение

Поскольку просто border-radius несовместим со всеми старыми браузерами и в новом браузере, это должно использоваться во многих формах, чтобы быть совместимым с сафари, опера, т.е. chrome, mozilla, поэтому я считаю, что использование этого атрибута в веб-сайт, доступ к которому возможен из старых браузеров, не очень эффективен! Это только моя точка зрения:)

Ответ 2

Здесь вариант CSS только в том случае, если кому-то интересно, используя сгенерированный контент (хотя вы можете использовать дополнительные элементы, для лучшей поддержки браузера - :before и :after являются IE8 + - http://caniuse.com/#feat=css-gencontent).

HTML:

<div><span></span></div>

CSS

div {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 1px solid #000;
}
div:before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    left: -10px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
}
div:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    right: -10px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}
span:before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -10px;
    left: -10px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
}
span:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -10px;
    right: -10px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}

http://jsfiddle.net/ryanbrill/ARVvq/

Ответ 3

Вот решение border-image, с которым я столкнулся, работает с любым размером.

Вот Демо.

Это изображение, используемое для кода:

border: 15px solid #000000;
border-image: url('/img/7621179d93bf417637df4d256f043761.png') 34% repeat;

Если вы хотите, чтобы размер элемента был явно установлен, добавьте:

box-sizing: border-box;

Ответ 4

Вот творческий подход... Не думайте, что есть какая-либо насадка для этой функции.

http://jsfiddle.net/tlaverdure/NrU34/

.box1{
position:relative;
background:#FFF;
width:200px;
height:200px;
border:solid 2px #090;
-webkit-border-radius: 3px;
border-radius: 3px;
margin:0 auto;
}
.box2{
position:absolute;
width:210px;
height:180px;
background-color:#FFF;
top:10px;
left:-5px;
}
.box3{
position:absolute;
width:180px;
height:210px;
background-color:#FFF;
top:-5px;
left:10px;
}
.box4{
border:solid 1px #009;
width:175px;
height:175px;
margin: 10px auto;
position:relative;
}

Ответ 5

Вот рабочий пример: http://jsfiddle.net/3jo5btxd/

CSS:

#div1 {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: white;
    border: 1px solid transparent;
}

#div2 {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 84px;
    width: 84px;
    background-color: #FFF;
    border-radius: 15px;
    padding: 10px;
}

#div1:hover {
    border: 1px solid red;
}

HTML:

<div id="div1"><div id="div2"><img src="http://placekitten.com/g/82/82"></div></div>

Изменено, чтобы добавить границу при наведении.

Ответ 6

Чистым способом CSS будет использование псевдоэлементов, таких как: Смещение (top и left) равно отрицательному значению border-width

body {
 
}

ul {
  list-style: none;
  text-align: center;
}

li {
  position: relative;
  display: inline-block;
  padding: 10px 40px;
  background-color: yellow;
  border: 1px solid #000;
  z-index: 0;
}

li:before {
  position: absolute;
  content: '';
  top: -1px;
  left: calc(50%);
  transform: translate(-50%,0);
  height: calc(100% + 2px);
  width: calc(100% - 15px);
  background-color: yellow;
  z-index: -1;
}

li:after {
  position: absolute;
  content: '';
  top: 50%;
  left: -1px;
  transform: translate(0%,-50%);
  height: calc(100% - 15px);
  width: calc(100% + 2px);
  background-color: yellow;
  z-index: -1;
}

a {
  position: relative;
  z-index: 1;
}

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Blog</a></li>
</ul>