Подскажите как реализовать нестандартную рамку

#css #css3 #border

Подскажите как элегантно решить такую задачу с рамкой на css
    

Ответы

Ответ 1

*{
  box-sizing:border-box;
}
body{
  margin:0;
  background:linear-gradient(to right, #acd,#cda);
}
.block{
  width:300px;
  margin:20px auto;
  position:relative;
  border-left:4px solid red;
  border-right:4px solid red;
}
.inner{
  height:150px;
  padding:10px;
}
.block:before,
.block:after,
.inner:before,
.inner:after{
  content:'';
  display:block;
  border-radius:20px;
  position:absolute;
  height:4px;
  background-color:red;
}
.block:before{
  top:0;
  left:-2px;
  width:calc(60% - 30px);
}
.block:after{
  top:0;
  right:-2px;
  width:calc(40% - 30px);
}
.inner:before{
  bottom:0;
  left:-2px;
  width:calc(40% - 30px);
}
.inner:after{
  bottom:0;
  right:-2px;
  width:calc(60% - 30px);
}

  

    Some Text
  



Ответ 2

Разобрался) Решение с svg))



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: url('https://images.pexels.com/photos/290660/pexels-photo-290660.jpeg?auto=compress&cs=tinysrgb&h=350')
no-repeat center /cover;
  font-size: 20px;
}

.some-block {
  padding: 20px;
  position: relative;
  margin: 50px auto;
  width: 300px;
  height: 300px;
  color: #fff;
  text-align: center;
}
.border {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

rect {
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: yellow;
  stroke-width: 10px;
  stroke-dashoffset: 100%;
  stroke-dasharray: 150% 35%;
}

  
  
Lorem ipsum dolor sit amet.



Ответ 3

body {
  background: #acd;
}    
.block{
  background: #acd;
  padding: 10px;
  border: 3px solid #f00;
  position: relative;
  width: 200px;
  height: 80px;
  margin: 20px;
}
.block:before, .block:after{
  content: ' ';
    position: absolute;
    width: 30%;
    height: 3px;
    background: #acd;

}
.block:before{
    top: -3px;
    right: 10%;
}
.block:after{
    bottom: -3px;
    left: 10%;
}

  Здесь ваш текст