Cara Membuat Border Postingan Melengkung di Blogger

1. Full rounded  corner  (membuat seluruh sudut menjadi melengkung) :

.post {

margin:.5em 0 1.5em;

border-bottom:1px dotted $bordercolor;

padding-bottom:1.5em;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px; }


2. Rounded corner di atas :

.post {

margin:.5em 0 1.5em;

border-bottom:1px dotted $bordercolor;

padding-bottom:1.5em;

-moz-border-radius-topleft: 10px;

-moz-border-radius-topright: 10px;

-webkit-border-radius-topleft: 10px;

-webkit-border-radius-topright: 10px;

-khtml-border-radius-topleft: 10px;

-khtml-border-radius-topright: 10px;

border-top-left-radius: 10px;

border-top-right-radius: 10px; }


3. Rounded corner di kiri atas :

.post {

margin:.5em 0 1.5em;

border-bottom:1px dotted $bordercolor;

padding-bottom:1.5em;

-moz-border-radius-topleft: 10px;

-webkit-border-radius-topleft: 10px;

-khtml-border-radius-topleft: 10px;

border-top-left-radius: 10px; }


4. Rounded corner di bawah :

.post {

margin:.5em 0 1.5em;

border-bottom:1px dotted $bordercolor;

padding-bottom:1.5em;

-moz-border-radius-bottomleft: 10px;

-moz-border-radius-bottomright: 10px;

-webkit-border-radius-bottomleft: 10px;

-webkit-border-radius-bottomright: 10px;

-khtml-border-radius-bottomleft: 10px;

-khtml-border-radius-bottomright: 10px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px; }


Catatan:
Kode warna merah adalah Kode yang harus ditambahkan
Kode -moz-border-radius digunakan untuk Firefox, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-bottom-left untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.