Как сделать уголки в css?

Question

[4eloBek]

Нашел в сети такое (CSS)

.boxShadow15 {
  width: 80%;
  max-width: 550px;
  margin: 3em auto;
  padding: 1em;
  box-shadow:
   -20px 20px 0 -17px #fff,
   20px -20px 0 -17px #fff,
   20px 20px 0 -20px #c27153,
   0 0 0 2px #c27153;
}

Делаю так:

img 
{
	position: relative;
	max-width:100% !important;
	height: auto;
	display: block;
        padding: 5px;
	
	-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
img:hover {
	-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
   box-shadow:
   -20px 20px 0 -17px #fff,
   20px -20px 0 -17px #fff,
   20px 20px 0 -12px #c27153,
   0 0 0 2px #c27153;
}

Получается так:


Но хотелось бы, чтобы были уголки со всех четырех сторон (ширинов 3px где-то).


Как это реализовать, кто знает? О_о

Comments

[Сергей Сергей]

на
codepen.io/anon/pen/RWPayd

[4eloBek]

Сергей Сергей: Спасибо)))

Answer 1

[rhost]

codepen.io/anon/pen/XmbdZa если правильно понял

Comments

[4eloBek]

Подправил вопрос

[rhost]

4eloBek: посмотрите ещё раз пример.

[4eloBek]

rhost: а с 2-ух остальных сторон еще можно уголки добавить? ))

[rhost]

4eloBek: сейчас же со всех сторон углы есть, где-то белые а где-то коричневые.

Answer 2

[#rybak]

codepen.io/Rybak/pen/MawyRv
как вам такой вариант ?

Comments

[4eloBek]

Спасибо. мне этот более нравиться -
codepen.io/anon/pen/RWPayd

Answer 3

[zamanych]

Углы делаются через свойство border-radius: **px;

Comments

[4eloBek]

это добавляет им просто скругление...