Double Borders with Border Radius

This method comes in handy if you’re working with plugins and are unable to edit theme files, or external files at the risk of losing your styles with an update.

.double-border {
	border-radius: 50px;
        background: #fff; /* background */
	border: 5px solid transparent; /* border one */
        box-shadow0 0 0 1px white; /* border two */
	height: 25px;
	width: 25px;
	-moz-background-clip: border;
	-webkit-background-clip: border;
	background-clip: border-box;
	-moz-background-clip: padding;
	-webkit-background-clip: padding;
	background-clip: padding-box;
	-moz-background-clip: content;
	-webkit-background-clip: content;
	background-clip: content-box;
}

Sources:

How to Double Border and Border Radius Demo

Transparent Borders with Background-Clip

Leave a Reply

Posted in CSS
katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.