JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="map"></div>
CSS
#map{
border: 6px solid #7AC49F;
border-radius: 30px 30px 30px 30px;
bottom: 0;
display: block;
height: auto;
left: 0;
margin: 39px 10px 10px;
position: absolute;
right: 0;
top: 0;
background-color:#eee;
}
div.olMapViewport {
border-radius: 25px;
display: block;
}
.olLayerDiv{
border-radius: 25px;
display: block;
}
}
JavaScript
var map = new OpenLayers.Map( 'map', {theme:null,
controls:[new OpenLayers.Control.Navigation()]} );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
map.setCenter([3, 49], 5);
var startPt=new OpenLayers.Geometry.Point( 5, 45);
var endPt=new OpenLayers.Geometry.Point(7,55);
//make the line:
var line=new OpenLayers.Geometry.LineString([startPt, endPt]);
//style
var style={strokeColor:"#fffff", strokeWidth:3};
//make vector
var fea=new OpenLayers.Feature.Vector(line, {}, style);
//make vectorLayer
var vec= new OpenLayers.Layer.Vector();
//add the feature
vec.addFeatures([fea]);
//add to map
map.addLayer(vec);