Different Type Of Borders

by rhombus. 22:40 0 comments

Jenis-jenis border kat bawah ini, korang boleh guna untuk post, post title, sidebar, sidebar title, blockquote dan lain-lain.

1. Go to Dashboard > Design > Edit HTML > Tick Expand Widget Templates.

2. Press Ctrl + F and search these codes.

For Sidebar, Sidebar Title :

h2 {
or .sidebar .widget{
or .sidebar h2 {

For Post Title :

h3.post-title {

For Blockquote :

.post blockquote {
or blockquote {

3. Copy the coding below and paste it below the code you've searched ( above ).

A :

-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px; 

B :

-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;

C :

-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;

D :

-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;

E :

-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;

F :

-moz-border-radius: 35px;
border-radius: 35px;

4. Preview and Save :P

Kalau nak contoh yang saya buat :

h2 {
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
text-shadow: 2px 2px 3px #FFFFFF;
text-align:center;
border: 1px SOLID #CC00FF;
background:#FAAFBE;
font: $(widget.title.font);5
text-transform: $(widget.title.text.transform);
color: $(widget.title.text.color);
margin: .5em 0;

Hmmm, saya punya agak panjang tapi tak apa lah. Buat pendek dan simple pun kiut-miut juga kan ???