Membuat Style Border Melengkung HTML

21/06/14, Kali ini saya akan membagikan kode html membuat border melengkung, tanpa banyak ngomong lagi langsung saja saya bagikan kode kodenya dan contohnya...
Berikut contoh dan kodenya :

 

<div style="-moz-border-radius: 20px 10px 20px 10px; -webkit-border-radius: 20px 10px 20px 10px; background-color: #0075a3; border-radius: 20px; border: 2px solid black; color: black; font-family: Arial; padding: 5px;"></div>

<div style="-moz-border-radius: 1em 0em 0em 0em; background-color: orange; border-radius: 1em 0em 0em 0em; border: 2px solid #000; color: white; height: 12px; margin: 0 auto; overflow: hidden;"></div>

<div style="-moz-border-radius: 0em 0em 0em 1em; background-color: #0075a3; border-radius: 0em 0em 0em 1em; border: 2px solid #000; color: white; height: 12px; margin: 0 auto; overflow: hidden;"></div>

<div style="-moz-border-radius: 0em 1em 0em 0em; background-color: #0075a3; border-radius: 0em 1em 0em 0em; border: 2px solid #000; color: white; height: 12px; margin: 0 auto; overflow: hidden;"></div>

<div style="-moz-border-radius: 0em 0em 1em 0em; background-color: #0075a3; border-radius: 0em 0em 1em 0em; border: 2px solid #000; color: white; height: 12px; margin: 0 auto; overflow: hidden;"></div>

<div style="-moz-border-radius: 1em 0em 0em 1em; background-color: #0075a3; border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white; height: 12px; margin: 0 auto; overflow: hidden;"></div>

<div style="-moz-border-radius: 1em 0em 0em 1em; background-color: #0075a3; border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white; height: 12px; margin: 0 auto; overflow: hidden;"></div

Silakan dicopy dan dilihat hasilnya
untuk menentukan garis melengkungnya ada di
BORDER-RADIUS.
border-radius: 1em 0em 0em 1em bisa kalian ubah dengan piksel PX

Contoh : border-radius: 4px 4px 4px 4px;

Kalian bisa mengembangkannya dengan editan kalian...sendiri !!!
Download Oshable For Smartphone Anda.

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post