Bo khung hình cho ảnh trong bài viết

Hôm trước có 1 bạn hỏi mình về cách để bo khung ảnh như trên blog của mình (bo 2 góc và vuông 2 góc) nên hôm nay mình cũng viết 1 bài viết nhỏ hướng dẫn các bạn cách để thực hiện được thủ thuật này.

1. Vào Thiết Kế → Chỉnh sửa HTML, tìm và xóa toàn bộ đoạn code sau: (nếu tìm không có thì bỏ qua bước này)

.post-body img {
...
...
...
}

2. Tiếp tục thay vào vị trí đã xóa (nếu tìm thấy đoạn code trên) hoặc chèn trước thẻ ]]></b:skin> (nếu không tìm thấy)

.post-body img{
color:#FFF;
text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border:1px solid rgba(255,255,255,0.1);
border-top:1px solid rgba(255,255,255,0.5);
border-bottom:1px solid rgba(255,255,255,0.01);
background: rgba(255,255,255,0.2);
background: -moz-linear-gradient(top, rgba(255,255,255,0.25), rgba(255,255,255,0.14) 150%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0.2)), color-stop(1.5, rgba(255,255,255,0.09)));
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#999999', EndColorStr='#666666'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#999999', EndColorStr='#666666')"; /* IE8 only */
box-shadow:0px 1px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.3)

padding:10px;

margin:10px;

border-radius:50px 0

}

Save Template lại là xong.
Chú ý trong đoạn code trên:
padding:10px; là độ dầy của khung tranh
border-radius:50px 0 là bo góc trên bên trái và góc dưới bên phải.
Code đầy đủ đây 
border-radius:50px 40px 30px 20px;
   50px là góc trên bên trái
   40px là góc trên bên phải
   30px là góc dưới bên phải
   20px là góc dưới bên trái
Muốn bo nhiều ít chỉ việc tăng giảm giá trị là được.