css metro tile selected style

I am trying to style a div to metro styles tile after select effect. I added border-top:28px solid #4390df; to the div but I am unable to get selected effect for the tile. Any help would be highly appreciated.

Below is sketch for my request enter image description here

My fiddled code is here

<div class="tileSelected">
    this is test content
</div>

.tileSelected{
    border-width: 4px;
    border-top:28px solid #4390df;
    border-left:28px solid transparent;
    display:block;
    content:"";
    height:100px;
    width:100px;
    background-color:black;
    color:#fff;
}

Solution

I don't think border is the way to go with this. Generated content would be a better option for putting that tick in the top right corner. You could do it with text, but a small tick image would be easier, like so:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.tileSelected {
    height:100px;
    width:100px;
    background:black;
    color:#fff;
    position: relative;
}

.tileSelected::before {
    content: "";
    width: 28px;
    height: 28px;
    top: 0;
    right: 0;
    position: absolute;
    background: url(tick.png);
}

</style>
</head>
<body>

<div class="tileSelected">
    this is test content
</div>

</body>
</html>