MULTI COLORED FRAMES USING HTML AND CSS

Multiple color frames using HTML and CSS codings

This is a interesting post which explains you how to create multiple colored frames using simple CSS and HTML codes.Previously i have explained about Creating attractive shapes using HTML and CSS and in this post you are about to see how to add colored frames to it.These codes can be applied to web elements such as table,paragraph and image.Now lets move on the codes to create this frame.

HTML CODE:
The HTML coding of this was very simple all you have to do is place your desired element in the <div> tag defining the class name along with it.

<div class="class name">.....</div>

CSS CODES:
This CSS code was the backbone of the multiple colored frames and it was done by means of changing the border-radius and border-color of the elements.

ROUNDED FRAME:

Circle multi color frames using HTML and CSS

.frame1{
border-color:#000000 #4785F8;
border-image:none;
border-radius: 50% 50% 50% 50%;
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-style:solid;
border-width:40px;
height:200px;
width:200px;}

SQUARE FRAME:

Square multicolor frame using HTML and CSS

.frame2{
border-color:#000000 #4785F8;
border-image:none;
border-radius: 0 0 0 0;
-moz-border-radius:0 0 0 0;
-webkit-border-radius:0 0 0 0;
border-style:solid;
border-width:20px;
height:200px;
width:200px;
}

ROUNDED BORDER FRAME:

.frame3{
border-color:#E9E7E4 #4785F8;
border-image:none;
border-radius: 50px 0 50px 0;
-moz-border-radius:50px 0 50px 0;
-webkit-border-radius:50px 0 50px 0;
border-style:solid;
border-width:20px;
height:200px;
width:300px;
}

ROUNDED BORDER FRAME:

.frame4{
border-color:#00FF40 #000000;
border-image:none;
border-radius: 0px 50px 0px 50px;
-moz-border-radius:0px 50px 0px 50px;
-webkit-border-radius:0px 50px 0px 50px;
border-style:solid;
border-width:20px;
height:200px;
width:300px;
}

MULTI COLORED FRAMES USING HTML AND CSS

Trending Articles

Practice Sheet of Right form of verbs for HSC Students

Download: FK ft Shenky – Nakuyewa ”Prod by: Shenky”

How to win at Markstrat (Markstrat Tips and Tricks) – Vodites

Ominde Commission Report and Recommendations – Ominde Report of 1964

Bureau of Internal Revenue: Regional Offices (Directory)

GO 53 on Enhancement of Ex-gratia upto 5 Lakhs Toddy Tappers in Telangana

Cakewalk CA-2A Leveling Amplifier v2.0.1.97 WiN, v2.0.1.96 OSX Incl Keygen

Mp3 Download: Mdu - Kunjenjenjena

How the kill the job , when DTP request running for long hours.

Microsoft Intune から展開しているアプリのアップデートについて

18-year-old girl was beaten for half an hour by two Northampton men in 'an...

Car crash in Dunton Bassett leaves driver in critical condition

Macky 2, Two Others In Road Accident

Application log 00000000000000089514: Could not convert queue DLVST90CLNT

Detroit mafia: D’Anna Brothers agree to plea deal

Delivery block field greyed out using VA02

Muloraki Au

【個人撮影】スマホのプライベート映像♪「中に出さないで///」カラオケ屋での生ハメ撮りが流出ｗ【リベンジポルノ】＠PornHub

BREAKING NEWS: Diamond Platnumz Is Reported Dead After Ghastly Car Accident

FIAT 500 B0111 B0112