Rotação de borda CSS [duplicada]

Esta pergunta já tem uma resposta aqui:

Em css posso girar a borda sozinho, em vez de girar o elemento inteiro? algo assim

Eu basicamente quero criar uma borda inclinada para o meu player de víde

Quero fazer algo como a resposta aceita deste post:Clique aqu

exceto que, em vez de inclinar a parte superior e inferior, inclina apenas o lado direit

Eu tentei isso, mas inclina os lados esquerdo e direito:

html:

<div class="skew-neg">
    <p>Hello World.</p>
    <p>My name is Jonathan.</p>
    <p>This box is skewed.</p>
    <p>In supported browsers.</p>
</div>​

css:

html { 
    background: #FFF;
    color: lightblue;
    font: 16px 'Arial';
    line-height: 150%;
}

div {
    background: blue;
    margin: 50px auto 0;
    padding: 20px;
    width: 200px;
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(0,0,0,.9);
    border-radius: 25px;
}

.skew-neg {
    -webkit-transform: skewX(-50deg);
    -moz-transform: skewX(-50deg);
    -ms-transform: skewX(-50deg);
    -o-transform: skewX(-50deg);
    transform: skewX(-50deg);
}

.skew-neg > * {
    -webkit-transform: skewX(50deg);
    -moz-transform: skewX(50deg);
    -ms-transform: skewX(50deg);
    -o-transform: skewX(50deg);
    transform: skewX(50deg);
}